CODEWITHSUNDEEP
htmlcss
lyzMaster
lyzMaster

Reputation: 660

How can I achieve such a shadow effect with css?

I am trying to achieve the shadow effect shown in the image.

enter image description here enter image description here

I don't know how to use css to achieve such a shadow effect. I tried to use box-shadow:

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

which affects like: enter image description here The effect is not ideal. How can I achieve that faint shadow effect?

Upvotes: 0

Views: 99

Answers (5)

Amaresh S M
Amaresh S M

Reputation: 3010

check out my answers:

Solution 1

body{
margin:30px;
}

.a1{
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
}
.b1{
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.75);
}
<div class="a1">
</div>
<br><br><br>
<div class="b1">
</div>

Solution 2

body{
margin:30px;
}

.a2{
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);

}

.b2{
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.75);

}
<div class="a2">
</div>
<br><br><br>
<div class="b2">
</div>

Solution 3

body{
margin:30px;
}

.a3{
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);}
.b3{
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.75);}
<div class="a3">
</div>
<br><br><br>
<div class="b3">
</div>

Solution 4

body{
margin:30px;
}

.a4{
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
}
.b4{
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
box-shadow: 0px 0px 73px -16px rgba(0,0,0,0.75);
}
<div class="a4">
</div>
<br><br><br>
<div class="b4">
</div>

Solution 5

body{
margin:30px;}

.a5{
height:100px;
width:300px;
border-radius:10px;
background-color:white;
-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.36); 
box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.36);
}
.b5{
height:100px;
width:300px;
border-radius:10px;
background-color:grey;
-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.36); 
box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.36);
}
<div class="a5">
</div>
<br><br><br>
<div class="b5">
</div>

If you want to create different custom shadow use online box shadow generator

Visit: https://www.cssmatic.com/box-shadow, https://html-css-js.com/css/generator/box-shadow/

Upvotes: 0

Sathees karan
Sathees karan

Reputation: 91

Try this css: 

  -webkit-box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75);
   box-shadow: -2px 41px 79px -48px rgba(0,0,0,0.75)

Upvotes: 0

Amir
Amir

Reputation: 1348

Try This:

-webkit-box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);
box-shadow: 0px 39px 40px -30px rgba(0,0,0,0.3);

Upvotes: 0

Raptor
Raptor

Reputation: 54258

Please see this demo: https://jsfiddle.net/sdz6p4qf/

demo screenshot

CSS used:

body {
  background-color: #CCC;
}
.rect {
  position: relative;
  margin-left: 50px;
  margin-top: 50px;
  width: 200px;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.16);
  background-color: #FFF;
}

What I modified is to increase the blur radius and increase the offset Y.

Upvotes: 1

roottraveller
roottraveller

Reputation: 8242

Try this. This is very basic. you can make corner round, opacity level of shadow etc..

div.shadow {
  width: 284px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
}
<div class="shadow">
  <p class="caption">This is a sample text box. </p>
    <p class="caption">This is a sample text box. </p>
  <p class="caption">This is a sample text box. </p>

</div>

Upvotes: 0

Related Questions