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.

Wanna do something awesome? Tell a friend:

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.

Good Words

Femy is detail oriented and creative in her approach, and thorough in her execution, of any project. She is a great team player and always willing to stretch herself in any direction that the project needs. It has been wonderful working with Femy!

Alpana Verma-Alag Co-founder and CEO, Upgrademe, Inc