How to create a shadow box effect using css

Published
Categorized as Web Development Tagged

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

By Femy Praseeth

Femy Praseeth is a Web developer who creates WordPress websites for purpose-driven organizations, from their designs. She is also a WP Noteworthy contributor, a11y advocate, and content creator, from San Jose, California

Leave a comment

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