CSS Box Shadow Generator

Drag the sliders for offset, blur, spread and color to design a shadow, see it live on a sample box, and copy the exact box-shadow CSS. It all runs in your browser.

Adjust the sliders to build a shadow.

The box-shadow syntax

The CSS box-shadow property takes up to four lengths plus a color: horizontal offset, vertical offset, blur radius, spread radius, then the color. An optional inset keyword draws the shadow inside the box.

box-shadow: 0 10px 25px -5px rgba(30,41,59,.25);

Positive vertical offset pushes the shadow down (as if light comes from above); larger blur softens the edge; negative spread shrinks the shadow so it doesn't bleed past the corners. This tool builds the rule from your sliders and previews it live.

Worked example

A soft elevation shadow:

Offsets: 0 horizontal, 10px down.
Blur & spread: 25px blur, −5px spread.
Color: dark slate at 25% opacity → 0 10px 25px -5px rgba(30,41,59,.25).

Designing soft, realistic shadows

Natural-looking shadows usually have a small vertical offset, generous blur and a slightly negative spread, with a low-opacity dark color rather than pure black. For "elevation" systems, larger offset and blur read as higher off the page. Use inset to create pressed or inset effects on inputs and panels. Keep opacity modest — heavy shadows quickly look artificial.

Tip: pairing a shadow with a gradient? Try the CSS gradient generator.

Frequently asked questions

What do the four lengths mean?

In order: horizontal offset, vertical offset, blur radius and spread radius. Offsets move the shadow, blur softens its edge, and spread grows or shrinks it before blurring.

What does inset do?

The inset keyword draws the shadow inside the element instead of behind it, which is useful for pressed buttons, inputs and recessed panels.

How do I make a soft shadow?

Use a small vertical offset, a larger blur, a slightly negative spread and a dark color at low opacity (e.g. 15–30%). Pure black at full opacity looks harsh.

Is the CSS made locally?

Yes. The preview and the box-shadow rule are generated in your browser as you move the sliders. Nothing is uploaded.

MB
Mustafa Bilgic · Editor, Calcool
Generates a standard CSS box-shadow (offset-x, offset-y, blur, spread, rgba color, optional inset) with a live preview. Everything runs in your browser — nothing you enter is uploaded, logged or stored.

Related calculators

🌈 CSS Gradient Generator🎨 Color Palette Generator🎨 Color Picker🌈 HEX to RGB Converter