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:
- x-value (horizontal position)
- y-value (vertical position)
- blur
- spread
- 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.