How to create a shadow box effect using css

Posted on:

Nov 17, 2015

By using negative z-index, pseudo-elements, and borders of very similar shades of 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);
}