box shadow and text shadow in css
multiple box and text shadow in css
different color box shadow and text shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box shadow and text shadow</title>
</head>
<style>
.container{
display: flex;
}
.card{
padding: 10px 20px;
margin: 10px 20px;
border: 1px solid black;
background-color: beige;
/* box shadow - bottom of the box*/
box-shadow: 6px 6px green;
/* box shadow - up side of the box*/
box-shadow: -6px -6px green;
/* box shadow - blur of the box to the up side*/
box-shadow: -6px -6px 20px green;
/* box shadow - blur of the box to the bottom side*/
box-shadow: 6px 6px 20px rgba(2, 4, 6, 0.5);
/* box shadow - different color box shadow*/
box-shadow: -6px -6px 20px green,6px 6px 20px yellow ;
}
.card h2{
/* text shadow - bottom of the box*/
text-shadow: 2px 2px green;
/* text shadow - up of the box*/
text-shadow: -2px -2px green;
/* text shadow - blur side up of the box*/
text-shadow: -2px -2px 20px red;
/* text shadow - blur bottom side of the box*/
text-shadow: 2px 2px 20px red;
/* text shadow - different color text shadowof the box*/
text-shadow: 2px 2px 20px red,-2px -2px 20px blue;
}
</style>
<body>
<div class="container">
<div class="card" id="card-1">
<h2>card 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae labore cum distinctio voluptates, ullam
eius quaerat sit qui ipsam nobis maiores vel beatae quam?</p>
</div>
<div class="card" id="card-2">
<h2>card 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae labore cum distinctio voluptates, ullam
eius quaerat sit qui ipsam nobis maiores vel beatae quam?</p>
</div>
<div class="card" id="card-3">
<h2>card 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae labore cum distinctio voluptates, ullam
eius quaerat sit qui ipsam nobis maiores vel beatae quam?</p>
</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.