CSS box shadow generator

How it works

A box shadow takes an optional inset keyword, then the horizontal offset, the vertical offset, the blur radius, the spread radius and a colour, all in that order. Offsets move the shadow away from the element: positive x moves it right and positive y moves it down. The blur radius softens the edge and cannot be negative, while the spread grows the shadow before it is blurred and may be negative to shrink it. The colour field takes a hex value, which is converted to rgba so the opacity field can set the alpha channel separately. The tool rejects values outside these ranges with a specific message, and shows the exact declaration it built.

Worked example

With x 2, y 4, blur 8, spread 0, the colour #000000 and opacity 0.2, the tool produces box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.2);. That is a black shadow moved 2 pixels right and 4 pixels down, blurred by 8 pixels, with no spread and 20% opacity, so it reads as a soft grey rather than a black edge.

Questions and answers