如何使用CSS实现这种阴影效果？

Question

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

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: The effect is not ideal. How can I achieve that faint shadow effect?

Answer 1

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

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.

Answer 2

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> 

Answer 3

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)

Answer 4

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);

Answer 5

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/