Box-shadow’s unnoticed “spread”

Due to the CSS3 property box-shadow its a breeze to add a shadow to almost any HTML element. For months now the various creative possibilities archived by this property (reaching from handy to absurd) are being discussed and presented on multiple sites (e.g.: peterkroener.de, dev.opera.com, viget.com).

In my opinion far too less attention is being spent at the optional fourth parameter spread Let’s change that.

Basic box shadow without spreadSpread enlarges the shadow

As you can see spread changes the size of the shadow. Positive values enlarge the shadow, negative values shrink it. You might know this feature from the layer style “Drop Shadow” in Photoshop where it is also called spread. Unlike Photoshop CSS3 allows us to make the drop shadow smaller than the shadow casting object. An ability we can use to limit the shadow to one side only.

Regular box-shadow bottom without spreadbox-shadow bottom with negative spread

Because of the 10px blur the shadow peeks around the edges. A negative spread shinks the shadow until it just appears at the bottom (or wich side ever we wanted it to occur). Of course this even works with inner shadows (inset).

See our demo site for more examples