What the box-shadow property does
box-shadow is the CSS property that paints one or more shadows around (or inside) an element. It is what gives cards, buttons, dropdowns and modals their sense of depth: a layer looks like it floats above the page because it casts a believable shadow. This generator lets you drag every parameter with a slider, watch a test box update instantly, and copy code that is ready to paste into your stylesheet. Nothing installs, and no data ever leaves your browser.
How to use the generator
- Drag the shadow sliders: offset X, offset Y, blur, spread and opacity.
- Pick the shadow color, and optionally change the background and box colors to judge real contrast.
- Tick Inset to push the shadow inside the element instead of outside.
- Press Add shadow to stack extra layers, or tap a Level button to load a Material-style elevation.
- Copy the finished
box-shadowblock with the Copy button.
What each parameter does
The syntax is box-shadow: X Y blur spread color, with an optional inset keyword up front. Each value changes exactly one thing:
| Parameter | What it controls | Detail |
|---|---|---|
| Offset X | Horizontal shift | Positive = right; negative = left |
| Offset Y | Vertical shift | Positive = down; negative = up |
| Blur | Edge softness | 0 = crisp edge; higher = more diffuse |
| Spread | Shadow size | Positive grows it; negative shrinks it |
| Color and opacity | Tint and transparency | Low opacity mimics real light |
Blur can never be negative. Spread can, and negative values are genuinely useful: a shadow with negative spread pulls inward and avoids the wide gray halo that makes designs look muddy.
Worked example
Say we want a soft card shadow. We set X to 0 (light falls straight from above), Y to 10 to drop it a little, blur to 20 to feather the edge, spread to 0, and a black color at just 25% opacity. The generator writes:
box-shadow: 0px 10px 20px 0px rgba(17, 24, 39, 0.25);
That rgba is the trick: instead of solid gray, we use near-transparent black so the shadow blends into any background. If the box looks glued to the surface, raise Y and blur together; if it looks dirty, lower the opacity.
Multiple shadows and elevation
A single shadow reads as flat. Design systems such as Material stack two layers: a tight, darker one that defines the object’s edge, and a wide, softer one that fakes ambient light. Separating them with commas produces a far more natural sense of elevation. The Level buttons in this tool load exactly those pairs, from the lowest elevation (a chip) up to the highest (a dialog lifted off the page). The higher the level, the larger the Y offset and blur, because taller objects cast longer, softer shadows.
Frequently asked questions
How do I make a soft, subtle shadow?
Keep offset X at 0, use a small Y (roughly 4 to 12), a generous blur (20 to 40), and above all a low opacity: 15% to 30%. The classic mistake is solid black; a convincing shadow is always semi-transparent.
What does the inset option do?
With inset, the shadow is drawn inside the element instead of outside, as if the surface were carved in. It is ideal for form fields, pressed toggles and recessed panels. You can even combine a normal shadow and an inset one on the same element by listing both.
Can I apply several shadows at once?
Yes. Separate each shadow with a comma and the browser draws them in order, with the first one on top. Layering two or three shadows with different blur values is the standard way to get realistic depth together with clean edges.