CSS Box-shadow

A new feature in CSS3 is the ability to add drop-shadow (box-shadow) effects. In CSS2 it was necessary to use JavaScript or images to add such features. The box-shadow property is new and will only work in current browsers.

Syntax

box-shadow:x, y, blur, spread #color;

Each browser has its own way of adding drop-shadow, however you do need to add a prefix for some browsers.

Syntax Firefox

-moz-box-shadow:x, y, blur, spread #color;

Syntax Webkit browsers (Chrome, Safari)

-webkit-box-shadow:x, y, blur, spread #color;

Inset

The box-shadow property also supports inset value, which makes the box-shadow appear inside instead of outside.

Examples – Box-shadow

In the examples below we have only provided the box-shadow code; you can add the moz or webkit prefix.

Example A

box-shadow: 0px 0px 30px #000;

Example B

box-shadow: 0px 0px 5px 2px #000;

Example C

box-shadow: 5px 0px 5px 2px #000;

Example D

box-shadow: 3px 5px 5px 2px #000;

Example E

box-shadow: -30px 0px 100px 2px #f00;

Example F

box-shadow: 30px -50px 100px 2px #B1BA04;

Example G

box-shadow: inset 0px 0px 30px 5px #000;

Example E and F are quite different. Giving x a negative value will make the box-shadow float right, while giving it a positive does the opposite. Giving y a negative value makes the box-shadow move to the top, while giving it a positive value will do the opposite. Example G uses the inset value.

Try It!.