CSS Box-Shadow Generator

Design a box-shadow visually — drag the sliders for offset, blur, spread, color and opacity, watch the live preview, and copy the CSS. Toggle inset for inner shadows. Runs in your browser.

FAQ

How do I create a CSS box-shadow?

The box-shadow property takes offset-x, offset-y, blur radius, spread radius and a color: for example box-shadow: 0 4px 12px rgba(0,0,0,0.15). This generator lets you set each value with a slider and copies the exact code.

What does the spread value do?

Spread grows (positive) or shrinks (negative) the shadow before the blur is applied. A small positive spread makes a shadow more solid; a negative spread is handy for subtle, tight shadows.

What is an inset shadow?

Adding the keyword inset draws the shadow inside the element instead of outside, which is useful for pressed-button or inner-glow effects. Toggle it here to see the difference.

How do I make a soft, modern shadow?

Use a small vertical offset, a larger blur, little or no spread, and a low-opacity black — for example 0 8px 24px rgba(0,0,0,0.12). Subtle and diffuse reads as modern; hard, dark shadows look dated.

More tools: CSS gradient generator, hex to RGB, and the full tools list.