CSS Box Shadow Generator
Design CSS box-shadows with a live preview.
100% private — runs in your browser, nothing is uploaded.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);How to use the CSS Box Shadow Generator
- 1Adjust the sliders
Set the x/y offset, blur, spread and opacity to taste.
- 2Pick a color
Choose the shadow color and toggle inset if you want an inner shadow.
- 3Add layers
Stack multiple shadows for realistic, layered depth.
- 4Copy the CSS
Copy the generated box-shadow rule into your stylesheet.
Examples
| Input | Output |
|---|---|
y 10, blur 25, spread -5, 25% | box-shadow: 0 10px 25px -5px rgba(0,0,0,0.25); |
inset, y 2, blur 4 | box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.15); |
Free CSS box-shadow generator
This CSS box-shadow generator lets you design shadows visually with sliders for offset, blur, spread, color and opacity, then copy the exact CSS. A live preview on a checkerboard background shows precisely how the shadow will look — no guessing, no trial-and-error reloads.
The secret to modern shadows: layering
The soft, believable shadows you see in polished interfaces are almost never a single shadow. They are two or three layers stacked — a tight, darker shadow close to the element and a wider, fainter one further out. This tool lets you add and tune multiple layers and outputs them as one comma-separated box-shadow rule.
Inset shadows and depth
Switch on inset to draw the shadow inside the box for pressed buttons, wells and inner glows. Combined with a subtle border, inset shadows are a quick way to make inputs and panels feel recessed. Everything runs in your browser and the CSS works in every modern engine.
Frequently Asked Questions
How does CSS box-shadow work?
box-shadow takes an x offset, a y offset, a blur radius, a spread radius and a color: box-shadow: 0 10px 25px -5px rgba(0,0,0,0.25). This tool builds that string for you with sliders and a live preview.
What does the spread value do?
Spread grows (positive) or shrinks (negative) the shadow before it is blurred. A small negative spread with a larger blur is the trick behind soft, modern 'floating card' shadows.
How do I make a soft, realistic shadow?
Use a low opacity (around 0.1–0.25), a generous blur, and a slightly negative spread. Layering two or three subtle shadows looks far more natural than one hard shadow.
Can I add multiple shadows?
Yes. CSS lets you comma-separate several shadows on one element, and this generator supports adding layers. Stacking a tight shadow and a wide soft one gives realistic depth.
What is an inset shadow?
Adding the inset keyword draws the shadow inside the element instead of outside, which is useful for pressed buttons, inset panels and inner glows.
Does the CSS work everywhere?
Yes. box-shadow is supported in every modern browser. The copied CSS is standard and needs no vendor prefixes.