CSS 3 – Box Shadow properties

The box-shadow property in CSS3 allows a comma-separated list of shadow attribute values.

These specify, in order, the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow);

Then,  an optional color value and an optional ‘inset‘ keyword.

Inset lets you create an inner shadow, rather than the default outer shadow.

Examples:

  box-shadow: 5px 5px;
  box-shadow: 5px 5px 15px #888;
  box-shadow: inset 2px 2px 2px 2px black;
  box-shadow: 5px 5px #666, -12px -12px #f4f4f4, 0px 0px 15px 15px #cc6600;

These are supported in newer browsers.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.