Ever wanted to isolate some text? An important message perhaps? This simple shadow technique creates an elegant shadowed border around your important content. Although it’s not 100% cross browser compatible (based on CSS3) most modern browsers will display it properly.

How it Works

First we start with our CSS needed to create the shadow effect. There’s two parts to this, one for the shadow effect and the other for the container:

 
#shadow {
	padding: 20px;
	border: 1px solid #f0f0f0;
	border-bottom: 2px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.box {
width: 500px;
margin: 50px auto;
padding: 20px;
}

The HTML

Now we put some HTML together in your page where you wish for the element to display:

Light Shadow
Os epulae, abico commoveo neo valetudo, camur luctus ut autem validus camur luctus. 

Minim reprobo, eu, enim, abbas cui duis premo incassum te obruo abluo nostrud. Hendrerit, dolore laoreet, imputo autem elit esse. Ventosus veniam uxor tum nostrud duis eu cogo ad, tamen hendrerit vel quis. Nostrud et ad qui nostrud, reprobo sagaciter elit.

Results:

The result should provide you with this sleek styling for your output:

Variations

Experiment with the width, height, radius and thicknesses to get various effects. This styling makes great looking blockquotes and excerpts. Enjoy!