How to CSS3 Box Shadow

An other cool CSS3 feature is the Box Shadow.

The only diference between Box Shadow and Text Shadow.

The Box Shadow is used for boxes and the Text Shadow for texts 😛

Ok ok let me explain myself.

Today we're going to use this 3 styles:

  • box-shadow: Xpx Ypx Zpx Color;
  • -moz-box-shadow: 5px 5px 5px #888;
  • -webkit-box-shadow: 5px 5px 5px #888;

Where each parameter means:

X = horizontal offset
Y = vertical offset
Z = blur
Color = shadow color


And the div

Developer's Blog


You should see a cool div below...

Developer's Blog


And how it looks like if your browser can't process the div above:

Code it Yourself

Take my example and start playing with it. Like you saw I used also the border-radius and the text-shadow.

Combine 'em all 😉


Leave a Reply

Add <code> Some Code </code> by using this tags.