Why use multiple shadow layers?

Real-world shadows are never a single soft blob. The Material elevation system stacks 2-3 shadows: a tight, dark, low-spread one near the edge plus a wider, lighter one further out. The first layer paints on top, the last paints behind - reorder them with the up/down buttons to see the effect.

An inset shadow is painted inside the element's padding-box instead of outside it. It's how you get pressed buttons, recessed inputs, or 'inner shadow' effects. Inset shadows render over the background but under the content, and they don't push the border out.

How do I make a neumorphic shadow?

Neumorphism uses two opposing shadows on a non-pure-white background: a dark shadow on the bottom-right (`8px 8px 16px rgba(0,0,0,0.10)`) and a light highlight on the top-left (`-8px -8px 16px rgba(255,255,255,0.85)`). The Neumorphism preset gives you this stack ready to tweak. The effect needs a slightly-grey or coloured surface - on pure white the highlight disappears.

Why doesn't my box-shadow show up?

Three usual suspects. (1) The element has `overflow: hidden` on a parent that clips the shadow. (2) The element is inline - box-shadow needs a block, inline-block or flex item to render. (3) The element has no background, so an inset shadow is invisible because there's nothing for it to paint on.

What's the difference between blur and spread?

Blur softens the shadow's edge - higher blur = wider feathered fade. Spread grows or shrinks the shadow before blurring - positive values make it bigger than the element, negative values make it smaller (useful for shadows that 'lift' the element by being narrower than it).

Should I use box-shadow or filter: drop-shadow?

Use `box-shadow` for rectangular boxes - it's cheaper to render and supports multi-layer + inset. Use `filter: drop-shadow()` for non-rectangular shapes like PNGs with transparency or SVG icons, because it follows the alpha channel instead of the bounding box. They're not interchangeable when the shape isn't a rectangle.

How many shadow layers is too many?

Past 4-5 layers you stop getting visible depth and start paying compositing cost. Material's elevation system tops out at 3 layers per level for that reason. If you find yourself stacking more, the values are probably fighting each other - try doubling one layer's spread instead.

CSS Box-Shadow Generator

Layer multiple CSS box-shadows with live preview, presets and a copy-ready declaration.

Runs in your browser

Stack as many shadow layers as you need. Each layer has X / Y offset, blur, spread, hex colour with an alpha slider, an inset toggle, plus reorder and mute controls. Start from a preset (Material elevation 1-16, neumorphism, focus ring, long shadow, glow), or build your own from scratch. The preview switches between light and dark backgrounds and reshapes to rounded, pill or circle - shadow design is background-dependent, so you can sanity-check both surfaces before shipping.

Presets

Shadow layers

Blur

Spread

Alpha: 10%

Inset

Blur

Spread

Alpha: 10%

Inset

CSS

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.10), 0px 4px 16px 0px rgba(0,0,0,0.10);

Preview

How to use it

Pick a preset
Material elevation 1-16, neumorphism, focus ring, long shadow, glow - one click loads the layers.
Tweak the layers
X / Y offset, blur, spread sliders + a hex picker with separate alpha. Numbers update live as you drag.
Reorder or mute
Up/down buttons change paint order (first = on top). The eye icon mutes a layer without losing its values.
Preview on both surfaces
Toggle light/dark background and round/pill/circle - shadow design is background-dependent.
Copy the CSS
The full `box-shadow:` declaration is ready to paste into your stylesheet or design tool.

What is it?

A CSS box-shadow generator builds the `box-shadow:` declaration from a list of shadow layers. The full syntax for one layer is `[inset?] <x-offset> <y-offset> <blur> <spread> <color>`, comma-separated for multiple layers. Browsers paint them back-to-front in declaration order, so the first layer in the list sits on top of the others. Negative offsets push the shadow up and to the left; positive offsets push it down and to the right (the convention matches the screen-coordinate system).

When to use it

Card elevation systems (Material, iOS, custom design systems), button focus rings for accessibility, neumorphic shapes, raised input fields, drop shadows on icons inside cards, hover and press state feedback, popovers and tooltips, modal overlays. Anywhere you'd reach for Photoshop to fake depth, CSS box-shadow does the job natively, animates well, and respects transparency.

Common mistakes

Using fully-opaque shadows - they look like clumsy outlines. Setting spread larger than blur - the result is a hard ring instead of a soft fade. Forgetting that inset shadows render inside the padding-box, not over the border. Picking shadow values that look right on a white background and break on dark mode (the dark-background preview here catches this). And applying box-shadow to an inline element without changing its display, which silently does nothing.

FAQ

Why use multiple shadow layers?: Real-world shadows are never a single soft blob. The Material elevation system stacks 2-3 shadows: a tight, dark, low-spread one near the edge plus a wider, lighter one further out. The first layer paints on top, the last paints behind - reorder them with the up/down buttons to see the effect.
What does inset do?: An inset shadow is painted inside the element's padding-box instead of outside it. It's how you get pressed buttons, recessed inputs, or 'inner shadow' effects. Inset shadows render over the background but under the content, and they don't push the border out.
How do I make a neumorphic shadow?: Neumorphism uses two opposing shadows on a non-pure-white background: a dark shadow on the bottom-right (`8px 8px 16px rgba(0,0,0,0.10)`) and a light highlight on the top-left (`-8px -8px 16px rgba(255,255,255,0.85)`). The Neumorphism preset gives you this stack ready to tweak. The effect needs a slightly-grey or coloured surface - on pure white the highlight disappears.
Why doesn't my box-shadow show up?: Three usual suspects. (1) The element has `overflow: hidden` on a parent that clips the shadow. (2) The element is inline - box-shadow needs a block, inline-block or flex item to render. (3) The element has no background, so an inset shadow is invisible because there's nothing for it to paint on.
What's the difference between blur and spread?: Blur softens the shadow's edge - higher blur = wider feathered fade. Spread grows or shrinks the shadow before blurring - positive values make it bigger than the element, negative values make it smaller (useful for shadows that 'lift' the element by being narrower than it).
Should I use box-shadow or filter: drop-shadow?: Use `box-shadow` for rectangular boxes - it's cheaper to render and supports multi-layer + inset. Use `filter: drop-shadow()` for non-rectangular shapes like PNGs with transparency or SVG icons, because it follows the alpha channel instead of the bounding box. They're not interchangeable when the shape isn't a rectangle.
How many shadow layers is too many?: Past 4-5 layers you stop getting visible depth and start paying compositing cost. Material's elevation system tops out at 3 layers per level for that reason. If you find yourself stacking more, the values are probably fighting each other - try doubling one layer's spread instead.