CSS box-shadow generator

Shadows give interfaces depth and hierarchy: cards appear to float, buttons look pressable and modals stand out from the page. The box-shadow property has several values that interact, so it is much faster to tune them visually. This generator gives you sliders and a live preview, and outputs the CSS.

How to use it

1. Set horizontal and vertical offsets, blur radius and spread.
2. Choose the shadow colour and opacity.
3. Toggle inset for inner shadows.
4. Copy the declaration.

Syntax

box-shadow: offset-x offset-y blur-radius spread-radius color;

• Offsets move the shadow; positive y moves it down, as if light comes from above.
• Blur softens the edge; 0 gives a hard shadow.
• Spread grows or shrinks the shadow before blurring.
• inset draws the shadow inside the element.

Examples

• Subtle card: box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.24);
• Raised dropdown: box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.2);
• Focus ring without layout shift: box-shadow: 0 0 0 3px rgb(37 99 235 / 0.5);
• Pressed button: box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2);

Design tips

• Layer two shadows, one tight and dark, one large and soft, for realistic depth.
• Use low opacity; real shadows are rarely solid black.
• Tint the shadow with the background hue for a more natural look on coloured surfaces.
• Large blurred shadows on many elements can slow scrolling on low-end devices.