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

Did you find this trick interesting? Would you like to learn more tricks like this using CSS?
Please let me know.

Subscribe by email
If you're an email kind of person, sign up below to get the latest blog posts in your inbox! You might get some free WordPress goodies from me:-).
I promise not to spam you or share your address.

Client Love

Femy’s a great front-end developer with excellent capabilities in XHTML/CSS/Javascript. She’s especially skilled with skinning ASP.Net websites–working in Visual Studio with .Net’s built-in controls and Telerik’s Rad Control package.

Arthur Wait VP, Engineering, Solutionset