Customer Inquiries

1001 Mark Boulevard St.

New York, NY, US.


Mon - Sat 8.00 - 18.00


Sales department

+01 2345 6789

CSS Box Shadow

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:


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


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

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.


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



Pin It on Pinterest

Share This