Why use multiple box-shadow layers instead of one?

Real depth is built from several stacked shadows — a tight, dark, low-opacity shadow close to the element plus one or more wider, softer shadows farther out. CSS lets you comma-separate any number of shadows in a single box-shadow property, and layering them produces far more natural elevation than a single shadow ever can. Neumorphism, glow rings and inset wells all rely on two or more layers working together.

What order do stacked box-shadows paint in?

Shadows are painted in the order they are listed, and earlier shadows are drawn on top of later ones. In this tool the first layer sits in front, so put your tightest, most defined shadow first and your soft ambient shadows last. The preview updates live so you can see exactly how the stack composites.

What does the inset option do?

Inset draws the shadow inside the element instead of casting it outward, which makes the box look pressed in or recessed — perfect for input fields, wells and toggle switches. You can mix inset and outset layers in the same stack; for example a soft outer shadow plus a subtle inset highlight reads like a raised, glossy button.

How do offset, blur and spread differ?

Offset X and Y move the shadow horizontally and vertically. Blur softens the edge — 0 is a hard edge and larger values fade it out. Spread grows (positive) or shrinks (negative) the shadow before the blur is applied, so a negative spread with a downward offset gives the tight, modern "floating card" look you see in most UI kits.

Does this work for neumorphism?

Yes. The Neumorphic preset loads the classic two-layer recipe: a dark shadow offset down-right and a light highlight offset up-left, both blurred. Set your shape and backdrop to the same colour, nudge the offsets and opacities, and you get the soft extruded look. Because everything is editable you can also build the inset "pressed" variant by flipping both layers to inset.

Is my data sent anywhere?

No. The generator runs entirely in your browser using plain CSS and the canvas-free DOM preview. Nothing is uploaded, and your current stack is saved only in this browser via local storage so it is still there when you return.

Multiple Box Shadow Generator

A multiple box-shadow generator for building realistic depth in CSS. Where a single shadow can only ever look flat, stacking several box-shadow layers lets you compose the tight contact shadow, the mid ambient shadow and the soft far shadow that real elevation is made of — the same technique behind Material Design elevation, neumorphism, glow rings and recessed input wells. You get a live preview, per-layer sliders, reordering, presets and one-click copy, all running locally in your browser.

How it works

CSS lets you assign any number of comma-separated shadows to a single box-shadow property. Each layer has the same anatomy: an optional inset keyword, an offset-x and offset-y, a blur radius, a spread radius and a colour (here expressed as rgba() so you can control opacity independently of the hex value). This tool keeps every layer as its own editable row.

You can add, duplicate, hide, remove and reorder layers. Ordering matters: shadows paint in list order and earlier ones are drawn on top, so the first layer sits in front. Toggle a layer’s Visible checkbox to compare with and without it, or flip inset to turn an outer shadow into an inner one. The preview surface itself is adjustable — change the shape colour, the backdrop, the corner radius and the box size so the shadow is judged against the background it will actually live on. The combined value is assembled live and offered as a one-line value, a full CSS rule, or a downloadable .css file. Your stack is saved in local storage, so it survives a refresh.

Example

A clean “floating card” shadow is usually two layers: a small, fairly dark, low-opacity shadow for contact, plus a larger, very soft shadow for ambient depth.

.card {
  box-shadow:
    0px 1px 2px 0px rgba(15, 23, 42, 0.08),
    0px 8px 24px -4px rgba(15, 23, 42, 0.16);
}

A neumorphic button instead uses a light highlight and a dark shadow on opposite corners:

.neu {
  box-shadow:
    10px 10px 22px 0px rgba(163, 177, 198, 0.55),
    -10px -10px 22px 0px rgba(255, 255, 255, 0.85);
}

Look	Layers	Key trait
Soft elevation	2	tight contact + soft ambient
Material 6dp	3	umbra, penumbra, ambient
Neumorphic	2	opposite light + dark offsets
Inset well	2	both layers `inset`
Glow ring	2	zero offset, coloured spread + blur

Every figure is composed in your browser — nothing is uploaded or stored on a server.