If you're a web designer, you might be familiar with Photoshop's (or other drawing program) "drop shadow" layer property. It gives that layer a small shadow, creating the illusion of it floating on top of the image canvas.

On the world of web development, there is a similar feature in CSS3 called a box-shadow. The basics of box-shadow property will be explained below with many CSS3 live demos, and we'll see a few of the cool capabilities this CSS3 property allows us to do.

More CSS3 related article to practice yourself:
- HTML Button with CSS3: Tiny & Helpful Demo plus Tutorial
- Great Collection of Extreme CSS3, JavaScript Tutorials
- Simple Awesome Inline Modal Box with CSS3
- Beautiful and Stunning CSS3 Animation Experiments
- Awesome jQuery Accordion with CSS3 and HTML5

• Demo
• Enlarge
• Reload
• New window

---

Standard Shadow

.standard-shadow { box-shadow: 1px 1px 1px rgba(0,0,0,0.5); }

The above code would generate a shadow like this:

You have your first 2 values which give the horizontal and vertical offsets of the shadow, a third value which sets the amount of blur you want to apply and lastly a color (in which case we use an rgba() value for a half opacity black). Box-shadow is supported on every modern browser, but if you are so incredibly inclined, a -webkit and -moz prefix would come in handy for full support of those older browsers. Now, you may think "Oh, well that's nice. Now I can make a shadow, woohoo" but things aren't over just yet!

Glow

.glow-shadow { box-shadow: 0 0 5px 1px #09F; }

Look at that! We adjust the offset so that the "shadow" is basically centered on the element. We expanded the blur radius to 5px, added a new value to 1 px, that value being "spread". This gives a sort of extra "thickness" to the shadow.

Another Border

.border-shadow { box-shadow: 0 0 0 2px #F00; }

Keeping the 0 x and y offset, but lowering the blur to 0 will basically use the spread value as the thickness for an extra border! This can come in handy when an input has the wrong info, or you want to add a border to an element without affecting it's size and position (shadows, unlike borders, don't shift or add to an element's width).

Multiple Shadow

.multi-shadow { box-shadow: 0 0 5px 1px #09F, 0 0 0 2px #F00; }

Interestingly enough, one of the neat features of box-shadow is the ability to stack them! By separating each set of values with a comma, you can add multiple shadows to a single element. This technique has been used to make some crazy things.

Inset Shadow

.inset-shadow { box-shadow: inset 1px 1px 4px #000; }

Last, but not least, by adding an "inset" value before all our other values, we can have the shadow radiate from the inside (a la Photoshop's inner shadow/glow) instead of out. This effect comes in handy for a pressed button or to add an inner glow to an element.

And those are the basics of the box-shadow! There's still more you can do too; here are a few more fancy tricks you can do! In particular, there are extra examples of what that optional "spread" value can do.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New