Skip to content
Arnaud.app

Material Elevation Shadow Generator

Free Material Design elevation generator with live preview. Get the exact multi-layer box-shadow for each elevation level, tweak it, and copy ready-to-use CSS - no signup.

box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.20), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);

Material Design conveys depth through 'elevation' - the higher an element sits, the larger and softer its shadow. Each level is a precise stack of two or three box-shadow layers. This generator loads those layers (elevation 1 to 16) so you can match Material exactly, adjust to taste, and copy the CSS for cards, app bars, floating action buttons and dialogs.

How to use it

  1. Pick a preset

    Material elevation 1-16, neumorphism, focus ring, long shadow, glow - one click loads the layers.

  2. Tweak the layers

    X / Y offset, blur, spread sliders + a hex picker with separate alpha. Numbers update live as you drag.

  3. Reorder or mute

    Up/down buttons change paint order (first = on top). The eye icon mutes a layer without losing its values.

  4. Preview on both surfaces

    Toggle light/dark background and round/pill/circle - shadow design is background-dependent.

  5. 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.
Can I export to Tailwind or filter: drop-shadow?
Yes - flip the Output toggle. Tailwind mode emits a `shadow-[…]` arbitrary value with 8-digit hex colours so multiple layers survive the comma. drop-shadow mode emits a `filter: drop-shadow()` chain for non-rectangular shapes; note it ignores spread and inset, which `box-shadow` supports.

Rate this tool

Share your experience to help others.

CSS Box-Shadow Generator

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

Try it out →

More in this category