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 πŸ˜‰

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.
  • I thought it was weird my Google Chrome doesn’t round those corners, but actualy it’s because you didn’t place the : Properly:

    -webkit-border-radius : 10px;

    Take a look at it πŸ˜‰

Leave a Reply

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