CSS Secrets

4 Visual Effects

15 One-sided shadows

The problem

One of the most common questions I see being asked about box-shadow on Q&A websites is how a shadow could be applied on one (or, more rarely, two) sides only. A quick search on stackoverflow.com reveals close to a thousand results for this. This makes sense, as showing a shadow only on one side creates a subtler, but equally realistic effect. Often, frustrated developers will even write to the CSS Working Group mailing list requesting new properties like box-shadow-bottom to be able to do this. However, such effects are already possible with clever use of the good ol’ box-shadow property we’ve learned and love.

Shadow on one side

Most people use box-shadow with three lengths and a color, like so:

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

FIGURE 4.1 Example mental model of a box-shadow being painted

The following series of steps is a good (albeit not completely technically accurate) way to visualize how this shadow is drawn (Figure 4.1):

Unless otherwise noted, referring to an element’s dimensions here means the dimensions of its border box, not its CSS width and height.

1. A rgba(0,0,0,.5) rectangle is drawn with the same dimensions and position as our element.

2. It’s moved 2px to the right and 3px to the bottom.

3. It’s blurred by 4px with a Gaussian blur algorithm (or similar). This essentially means that the color transition ...