When building a website, we're always trying to make it as graphically attractive as possible. With the features of CSS3, one can easily enhance a design using cool effects without adding extra graphical elements or extra mark-up. We're referring here to drop-shadows, one of the most popular graphical effects.

The technique is rather simple and allows front-end coders to create a large variety of shadow types, including: simple shadow, raised box, perspective, lifted corners, and more.

How is it done?

We generate pseudo-elements from an element, push them behind and apply to them CSS3 shadows and transforms.

Let's start with a simple shadow. We create a simple element and we apply the ".shadow" class to it.

.shadow {
	position: relative;
	width: 300px;
	height: 200px;
	background-color: #fff;
	border: 1px solid #ccc;
	float: left;
	margin-left: 150px;
}

To create our shadow effect, we simply add the box-shadow css property to its :before pseudo-element.

.shadow:before {
	position: absolute;
	z-index: -1;
	content: "";
	left: 1px;
	right: 1px;
	top: 1px;
	bottom: 1px;
	-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

Perspective Shadow

Let's see step by step how to do a cool perspective shadow. We'll use a container with the class ".perspective" for that.

.perspective {
	position: relative;
	width: 300px;
	height: 200px;
	background-color: #fff;
	border: 1px solid #ccc;
	float: left;
	margin-left: 150px;
}

We only need the :before pseudo-element for our perspective shadow example.

.perspective:before {
	content: "";
	position: absolute;
	z-index: -1;
}

Pseudo-elements need to have absolute positioning and explicit width. To ensure that bigger elements don't extend too much, it's best to specify max-width and max-height properties.

.perspective:before {
	left: 90px;
	bottom: 5px;
	width: 50%;
	height: 35%;
	max-width: 200px;
	max-height: 50px;
}

Now that all required elements are in place, we can see the desired effect. We apply a shadow, skew it to generate perspective effect, and position it in the right place.

.perspective:before {
	-webkit-box-shadow: -90px 0 8px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: -90px 0 8px rgba(0, 0, 0, 0.4);
	box-shadow: -90px 0 8px rgba(0, 0, 0, 0.4);
	-webkit-transform: skew(45deg);
	-moz-transform: skew(45deg);
	-ms-transform: skew(45deg);
	-o-transform: skew(45deg);
	transform: skew(45deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

That's it!

Lifted-Corners Shadow

To create a lifted-corners shadow effect, we need to create and use both :before and :after pseudo-elements. We'll basically use the same main container as above but we throw some round corners into the mix; they really make the effect look better.

.lifted-corners {
	position: relative;
	width: 240px;
	height: 160px;
	background-color: #fff;
	border: 1px solid #ccc;
	float: left;
	margin-left: 150px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

We provide dimensions and apply the shadow for the pseudo-elements.

.lifted-corners:before,
.lifted-corners:after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 80%;
	height: 80%;
	max-width: 160px;
	max-height: 60px;
	-webkit-box-shadow:0 15px 7px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.75);
	box-shadow:0 15px 7px rgba(0, 0, 0, 0.75);
	bottom: 20px;
}

Now it's time to position and transform the pseudo-elements to create our cool lifted corners effect.

.lifted-corners:before {
	left: 10px;
	-webkit-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	transform:rotate(-5deg);
}

.lifted-corners:after {
	right: 10px;
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	transform:rotate(5deg);
}

And we have our lifted corners effect!

And for the last example, a curved shadow under an element, only the :before pseudo-element is needed.

.horizontal-curved-shadow {
	position: relative;
	width: 240px;
	height: 160px;
	background-color: #fff;
	border: 1px solid #ccc;
}

.horizontal-curved-shadow:before {
	position: absolute;
	z-index: -1;
	content: "";
	-moz-border-radius: 100px / 10px;
	-webkit-border-radius: 100px / 10px;
	border-radius: 100px / 10px;
	-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
	left: 10px;
	right: 10px;
	top: 50%;
	bottom: 0;
}

This is it!

These enhancements are supported by IE 9+, Firefox 3.5+, Chrome 5+, Safari 5+ and Opera 10.6+.