Box-Shadow Generator

Build a CSS box-shadow declaration from offsets, blur, spread and colour. It runs in your browser.

How to use it

1. Enter the horizontal and vertical offsets, blur and spread in pixels.
2. Enter a colour, for example rgba(0,0,0,0.2).
3. Tick inset for an inner shadow.
4. Copy the CSS.

Example

Offsets 0 and 4, blur 12, spread 0 and rgba(0,0,0,0.2) give:

box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.2);

Good to know

Positive offsets move the shadow right and down. Blur softens the edge (zero is hard) and spread grows or shrinks it. A subtle shadow, such as 10 to 25% black with a moderate blur, usually looks best. The tool makes one shadow at a time; join several with commas by hand. A shadow does not take up space or move other elements, and a parent with hidden overflow can clip it. Do not rely on a shadow alone to separate content.

See the guide and the glossary entry.

FAQs