CSS box-shadow explained: offsets, blur, spread and layers

A shadow is a copy of the box, moved, blurred and coloured. Five numbers control it.

The syntax

box-shadow: 0 12px 30px -6px rgba(27, 42, 73, 0.35); reads as: no horizontal offset, 12 pixels down, 30 pixels of blur, a spread of minus 6 pixels, in a dark blue at 35% opacity. The word inset goes first when the shadow is drawn inside the box. The two offsets are required; blur, spread and colour are optional (the colour defaults to the text colour).

Blur and spread are different

Blur softens the edge. It cannot be negative. Spread changes the size of the shadow before it is softened: positive spread makes it larger than the box, negative spread smaller. A large blur with a negative spread gives a shadow that is tucked under the box and only visible below, which is what most modern interface cards use.

Layers

You can list several shadows separated by commas. The first one is drawn on top. Two or three layers with growing offset and blur look more natural than one big shadow. A simple pattern doubles the offset and the blur from one layer to the next: 0 1px 2px, 0 2px 4px, 0 4px 8px, 0 8px 16px, each at low opacity.

Colour

Pure black shadows look harsh. Use a very dark version of the colour around the element, with low opacity. On a coloured background a shadow with the same hue looks like light passing through.

Inset and "pressed" looks

inset 0 2px 6px rgba(0,0,0,0.25) makes an element look pressed in. Combined with an outer light shadow it can imitate buttons and inputs.

box-shadow or drop-shadow?

box-shadow follows the box and its rounded corners. filter: drop-shadow(0 6px 8px rgba(0,0,0,0.3)) follows the actual visible shape, including transparent parts of a PNG or SVG and the result of clip-path. It has no spread and no inset. Use drop-shadow for icons and clipped shapes.

Performance and accessibility

Large blurs on many elements cost drawing time, and animating the shadow on every frame is expensive. If you need a hover effect, put the larger shadow on a pseudo-element and fade its opacity. Do not use a shadow as the only sign of focus or state: a visible outline is more reliable, and shadows can be disabled in high-contrast modes.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.