CSS Box Shadow Generator Online – Layered & Inset Shadows

How to use the CSS Box Shadow Generator

Start from a preset below the code panel (Subtle, Medium, Large, Layered soft, Sharp offset, Glow, Inset or Outline ring), or edit the two default layers.

Click a layer in the Layers list and adjust Horizontal offset, Vertical offset, Blur radius, Spread radius, Shadow colour, Opacity and Inset.

Use + Add layer to stack more shadows, the checkbox next to a layer to hide it, and × to remove it.

Under Preview box, set the box color, border radius and size, and switch the preview background between Light, Dark and Checker.

Open the CSS or Tailwind tab and press Copy or Download.

A CSS box shadow generator for layered shadows

This CSS box shadow generator builds the box-shadow property one layer at a time. Each layer has its own offsets, blur, spread, color, opacity and inset switch, and the preview box updates as you drag. When it looks right, you copy a finished rule instead of guessing values in DevTools.

Real-world shadows rarely come from a single layer. Interfaces that look soft and natural usually combine a tight, darker shadow near the element with a wider, fainter one further out, and this tool is designed around that workflow.

Example output

The tool opens with two layers in a slate color (#0f172a) rather than pure black, which produces this CSS:

.box {
  -webkit-box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.25),
    0 4px 8px -4px rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.25),
    0 4px 8px -4px rgba(15, 23, 42, 0.12);
}

Layers are separated by commas and the first one is painted on top. The -webkit- line only matters for very old WebKit browsers; you can delete it if you do not support them. The Tailwind tab gives the same value as an arbitrary class: shadow-[0_10px_30px_-5px_rgba(15,23,42,0.25),0_4px_8px_-4px_rgba(15,23,42,0.12)].

Options explained

Control	What it does
Horizontal / vertical offset	Moves the shadow right/down (positive) or left/up (negative), from -100 to 100px. A positive vertical offset reads as light from above.
Blur radius	0 gives a hard edge; larger values (up to 200px) soften and widen the shadow.
Spread radius	Grows or shrinks the shadow before blurring. A negative spread keeps a blurred shadow tucked under the box so it does not leak out at the sides.
Colour and opacity	Combined into `rgba()`. At 100% the plain hex value is written.
Inset	Draws the shadow inside the border, as in `inset 0 2px 6px 0 rgba(0, 0, 0, 0.2)`, for pressed buttons and input wells.

The spread value is left out when it is 0 on an outer shadow, so simple layers stay short. The box color, radius and size under Preview box only affect the preview, not the generated CSS.

Presets worth knowing

Layered soft stacks five layers whose offset and blur double each time (1/2, 2/4, 4/8, 8/16, 16/32px) at 7% opacity. It produces a smooth, realistic falloff that a single large blur cannot.
Sharp offset is a single 8px 8px 0 layer at full opacity, the flat "brutalist" look.
Outline ring uses zero blur and a positive spread (0 0 0 3px plus a faint 6px ring) to draw rings that do not change layout, which is useful for focus and selection states.
Glow uses a colored shadow with no offset for neon-style highlights.

Tips and common mistakes

Pure black looks dirty. A dark, slightly tinted color at low opacity blends better with colored backgrounds. Convert your palette color with HEX to RGBA if you want to write the alpha yourself.
Shadows are clipped by overflow. box-shadow does not take up space in the layout, so a parent with overflow: hidden or a tight scroll container cuts it off. Add padding to the parent or move the overflow rule.
Shadows follow border-radius. Rounded corners round the shadow too. Shape your corners with the border radius generator and the shadow will match.
Transparent images need filter. box-shadow follows the element's box, not the visible pixels of a PNG. Use filter: drop-shadow() for cut-out images and clipped shapes.
Animating large blurs is costly. For hover effects, put the bigger shadow on a pseudo-element and animate its opacity instead of transitioning box-shadow directly.
Forced colors mode. Windows high-contrast themes remove box-shadows, so a shadow ring alone is not a reliable focus indicator; keep a transparent outline as a backup.

Box shadow vs neumorphism

A regular drop shadow separates an element from the page. Soft UI pairs a light and a dark shadow in the same color as the background to make the element look extruded from it. If that is the look you want, the neumorphism generator calculates both colors from one base color.

Privacy

All shadow values are generated and previewed locally in your browser. Nothing is sent to a server.

Frequently asked questions

What does a negative spread value do?

It shrinks the shadow before it is blurred. Combined with a vertical offset, a negative spread keeps the shadow under the element so it shows mainly below the box instead of on all four sides.

How many shadow layers can I use?

CSS sets no practical limit; you can add as many comma-separated layers as you like. Most designs use two to five, since every layer adds painting work, especially with large blur values.

Is -webkit-box-shadow still needed?

No current browser needs it; unprefixed box-shadow has been supported for many years. The generator includes the prefixed line for very old WebKit browsers, and removing it has no effect in modern ones.

How do I add a shadow to text instead of a box?

Text uses the separate text-shadow property, which has no spread or inset value. Use the CSS text shadow generator to build it.

Can I combine inset and outer shadows on one element?

Yes. Add a layer and tick Inset for it while leaving the others as outer shadows. The browser draws inner shadows inside the border and outer shadows outside it in the same declaration.

CSS Box Shadow Generator