CSS3 box shadow

By | January 8, 2014

A nice feauture in CSS3 is the box-shadow. Instead of working with tedious PNG-images you can add shadows to any element with the CSS property box-shadow.

The syntax works like this:

box-shadow: <offset-x> <offset-y> <blur> <spread> <color> <inset>

  • The offset settings will set the angle of the shadow. Where it will be cast in relation to the element.
  • Blur with set how much the shadows blurs out from its defined position.
  • Spread will set the size of the shadow. By default the same size as the element. This number can be negative to set a smaller shadow.
  • Color can be any  format. i.e. black, yellow, #FFF, rgb(255, 240, 240) or rgba(0, 0, 0, 0.7)
  • Using the inset option will cast the shadow inside the element instead of outside.

Here are some examples:

box-shadow: 10px 5px #000;
Shadow is offset 10px to the right, 5px down and have the color #000 (black)

Skärmavbild 2014-01-08 kl. 11.24.52

box-shadow: 0px 0px 10px #000;
Shadow will fall right under the element. But it will blur out 10px, casting a transparent shadow.

Skärmavbild 2014-01-08 kl. 11.38.49

box-shadow: 0px 0px 10px 5px #000;
Shadow will fall right under, blur 10px and it will be 5px larger than the element.

Skärmavbild 2014-01-08 kl. 14.58.40

box-shadow: 3px 3px 10px #000 inset;
Shadow is offset 3px right and 3px down. It is blurred 10px. Inset is selected which makes the shadow fall inside the element.

Skärmavbild 2014-01-08 kl. 14.52.13

You may of course also use rgba, for setting the color. Using the alpha channel to set opacity:
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);
Shadow falls 5px right and 5px down. It will blur 5px and the color is black (0 ,0 ,0) with 0.6 opacity

Skärmavbild 2014-01-08 kl. 15.01.14

Leave a Reply

Your email address will not be published. Required fields are marked *