CSS3 Box Shadow

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

This is a typical shadow attached to an element. This is usually under the element but it can also be inside it or create a relief effect.

Syntax

box-shadow:
  (inset)
  _horizontal_offset_
  _vertical_offset_
  (_blur_)
  (_spread_)
  _color_,
  (_other_shadows_);

The basic kind of shadow can be created in a jiffy. The first number indicates the horizontal offset, the second the vertical one - a positive value offsets the shadow down or right, a negative one up or left. The third value is color and believe it or not, the best practice is to use a semi-transparent RGBa color. Let’s show this using several examples.

box-shadow: 5px 5px rgba(0, 0, 0, .5);

If we add another number, the browser will indicate that you want to blur the shadow:

box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);

One more number and you will define the spread distance:

box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, .5);

The key word inset changes the shadow from outer to inner:

box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, .5);

You can also create multiple shadows by dividing the values with a comma. The first shadow is the top one:

box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, .5),
  inset 5px 5px 10px 10px rgba(0, 0, 0, .5);

You can see a live example at cdpn.io/e/lAoDv.

Tips and Tricks

Shadow on One Side

If we want to create a shadow on one side only, simply set the horizontal shadow to 0. However, bear in mind that thanks to using blur, the shadow will be leaking from the top and bottom:

box-shadow: 5px 0 5px -2px rgba(0,0,0,.5);

See a live example at cdpn.io/e/JnGyb.

Shadow as a Copy of an Object

Drawing the Microsoft logo using a shadow may be rather impractical but it also demonstrates the power of using multiple shadows without blurring. See an example at cdpn.io/e/qJuzw.

You can also combine blurred and sharp shadows: dabblet.com/gist/2043600.

Browser Support

IE9+. There is almost no problem in any modern browser: caniuse.com/box-shadow

Older Webkit Browsers Sometimes Ignore the Spread

A slight problem in older webkit browsers is that they ignore the null value of the spread if a value for blur is missing. Therefore, the following notation won’t work in iOS6 Safari or Android Browser 2.3:

box-shadow: 5px 5px 0 rgba(0, 0, 0, .5);

This one, on the other hand, will:

box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);

See a live example at cdpn.io/e/FGtbu.

Internet Explorer 8

In IE8, a box shadow can be rendered using the filter proprietary property. Example:

filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=145, Strength=3);

However, not all types of shadows can be substituted like this.

In older versions of Internet Explorer, a shadow can be rendered using a css3pie.com polyfill but usually you can get away with this using the zero fallback strategy.




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more