CSS3 Box-Shadow on One Side


I’m working on a fresh design, and need a shadow…but only on one side of an element. Typically, box-shadows show up on two sides, like this:

I don’t want a two-sided shadow. I want the shadow on one side! How about this?

Not quite. Some of the shadow shows around the element.

Like magic, huh? The key is to use a negative value for the spread. The spread is the least-known part of box-shadow. There are 5 values involved in box-shadow:

  1. x-value (horizontal position)
  2. y-value (vertical position)
  3. blur
  4. spread
  5. color

It’s written like this:

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

The 5px means ‘move the shadow from directly beneath the box, 5 pixels to the right. A negative value would move it left.

The 0 means ‘do not move the shadow up or down’.

The 2px means ‘blur the shadow 2 pixels in all directions’.

The -3px means ‘contract the the shadow by 3 pixels in all directions. A positive value would, of course, ‘spread out’ the shadow.

So, using a mixture of positive and negative values, we can create a shadow on any or all sides of an element. Because we can use multiple shadows on a single element, we can get as crazy as we want.