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?
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.
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>
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)
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);
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.