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 peeps:

Leave a Reply

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

Endorsed by these folks ...

Femy is great and very easy to work with. She’s capable, responsive and produces good work.

Brennan Hom Technical Program Manager, Solutionset