How to create a shadow box effect using css

By using negative z-index, pseudo elements and borders of very similar shades of a color, here is a simple and easy way to add a shadow box effect to your web page, with no images.

See the Pen shadow box effect by Femy Praseeth (@femkreations) on CodePen.

Here is the HTML/ CSS Code snippet

.box{
position:relative;
z-index:1;
background:rgb(48,43,42);
}
.box:after{
content:"";
position:absolute;
top:20px;
right:20px;
bottom:20px;
left:20px;
z-index: -1;
background:rgb(39,34,34);
border-top:1px solid rgb(32,27,27);
border-left:1px solid rgb(32,27,27);
border-bottom:1px solid rgb(82,71,81);
border-right:1px solid rgb(82,71,81);
}

I’d love to know to hear from you: Did you find this trick interesting? Would you like to learn more tricks like this using CSS?
Leave a comment below and let me know.

Thanks for geeking out with me,

Signed By Femy Praseeth

Share it with your people:

Leave a Reply

Your email address will not be published. Required fields are marked *

Endorsed by these folks ...

My experience working with femKreations was excellent. Femy was very creative, professional, and easy to work with. She accommodated all my requests regarding layouts, and suggested some very creative solutions. She delivered all projects on time, and I was very happy with results. I sure will go back to her for all my future needs.

Palak Chauhan Designer/Artist, Creations by Palak