CSS Box Shadow Generator

What it does

The CSS Box Shadow Generator turns a set of sliders and a color picker into a ready-to-paste box-shadow CSS declaration. Adjust the horizontal and vertical offset, blur radius, spread radius, shadow color and opacity, and optionally turn the shadow into an inset (inner) shadow — the generated CSS updates instantly as you move each control.

The box-shadow syntax

A CSS box-shadow declaration follows this shape:

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

• offset-x — how far the shadow is pushed horizontally. Positive values push it right, negative values push it left.
• offset-y — how far the shadow is pushed vertically. Positive values push it down, negative values push it up.
• blur-radius — how soft the shadow's edge is. 0 gives a hard-edged shadow; larger values spread the blur further and can't go negative.
• spread-radius — grows (positive) or shrinks (negative) the shadow before blurring is applied. Optional in raw CSS, but always included here for a fully explicit declaration.
• color — the shadow's color, output as rgba(r, g, b, a) so the alpha channel captures the opacity slider alongside the RGB value.
• inset — an optional keyword, placed before the offsets, that flips the shadow to render inside the element's border instead of outside it (a "pressed" or "carved-in" look).

Multiple shadows can be stacked by comma-separating declarations (box-shadow: a, b, c;); this tool focuses on generating one clean shadow declaration at a time, which is what most designs need and what you'll layer or fine-tune by hand for multi-shadow effects.

How to use it

1. Drag the Horizontal Offset and Vertical Offset sliders to position the shadow.
2. Adjust Blur Radius to soften the edge, and Spread Radius to grow or shrink the shadow shape.
3. Pick a Shadow Color and set Opacity — the tool combines both into a single rgba() value.
4. Toggle Inset shadow on if you want an inner shadow instead of a drop shadow.
5. Copy the generated box-shadow declaration from the code output and paste it into your stylesheet.

FAQ

Why does the output use rgba() instead of a hex color? Because CSS hex colors (#000000) can't express partial transparency on their own. Combining the color picker with the opacity slider into rgba(r, g, b, a) lets you dial in exactly how strong the shadow looks without a separate opacity property affecting the rest of the element.

Can spread-radius be negative? Yes — a negative spread shrinks the shadow's shape before the blur is applied, which is useful for soft, contained shadows (like a subtle elevation effect) rather than one that bleeds far past the element's edges.

What's the difference between a regular shadow and an inset shadow? A regular box-shadow renders outside the element's border, as if the element were lifted off the page. An inset shadow renders inside the border instead, making the element look pressed in or carved out.

Does this tool store or upload anything? No. All calculations run locally in your browser — your color and slider values never leave your device.