CSS Box Shadow Generator (Multi-Layer, Material + Apple) — Tailwind / React / Vue Export

Controls

Presets

20 curated stacks — Material elevation, Apple, Stripe, smooth-shadow, long-shadow, neumorphism.

Editing

Editing the default (resting) state. Toggle "Enable hover" below to add a hover variant.

Shadow layers (1/20)

L1 · y8 · b24 · 25%

Layer 1 · settings

Offset X

0px

Offset Y

8px

Blur

24px

Spread

0px

Opacity

25%

Color

Inset (recessed shadow)

Hover transition

Enable hover variant

Export ships a :hover rule + transition: box-shadow Nms ease so the change animates smoothly. Switch to "Hover state" above to tune the hover shadow.

Box appearance

Shape

Box color

Surface:

Advertisement

Layers1/1
ShapeCard
Hoveroff
EditingDefault

About this generator

Most box-shadow generators give you one shadow — set x, y, blur, color, copy. The output looks flat because real objects in the real world cast multiple shadows at different distances. Every great design system in the last decade (Material Design’s elevation, Apple’s HIG, Stripe, Linear, GitHub, Vercel) ships 2-4 stacked shadows per surface. This generator was rebuilt around that recipe.

Three things make this different from every other free shadow generator. Multi-layer shadow stack — stack up to 20 shadows in one declaration, each with full x/y/blur/spread/color/opacity/inset control; reorder layers; toggle visibility per layer for quick A/B comparison. Production-grade preset library — Material 1dp through 24dp, Apple soft + sharp, Stripe / Linear floating-card, Tobias Ahlin smooth-shadow, long-shadow (8 or 30 layers), neumorphic dual, neon glow. Hover transition variant — toggle one switch and the export ships a :hover state + transition declaration so you get the Stripe-card lift effect ready to paste.

Five framework exports — CSS, SCSS variables, Tailwind arbitrary-value, React inline-style, Vue scoped CSS. The Tailwind export uses square-bracket syntax so a 30-layer long-shadow ships as a single utility class with no Tailwind config changes. The SCSS export extracts every layer to a $shadow-stack-N variable for design-token reuse.

Permalink: every adjustment encodes into the URL hash, so you can bookmark a tuned shadow stack or send it to a teammate. No login, no watermark, no paywall. Free and MIT-licensed.

How to use

Start with a preset

23 curated stacks across 5 categories — pick Material 8dp for the convergent card-shadow, Apple soft + sharp for an iOS feel, Stripe for a financial-product polish, smooth-shadow for the Ahlin natural look, or long-shadow for the diagonal projection.

Stack additional layers

Click "+ Add layer" to stack up to 20 shadows in one declaration. Each new layer composes on top of the previous ones; reorder via ▲ ▼; toggle visibility (●/◌) per layer to A/B without deleting.

Tune the active layer

Click any layer to make it active, then adjust offset X/Y (position), blur (softness), spread (size before blur), color, opacity, and inset (recessed). Spread < 0 produces the floating look from Material 16dp+ — most generators don't expose it.

Enable hover transition

Flip "Enable hover variant" then switch the editing tab to "Hover state" to tune the shadow your element becomes ON HOVER. The export ships :hover { box-shadow: ... } + transition: box-shadow Nms ease — ready to paste.

Preview on real surfaces

The Surface pills above the preview let you check the shadow against six backgrounds. Shadows that look great on dark backgrounds often disappear on white — verify both before shipping.

Pick a format & export

Switch the export tab to your stack — CSS, SCSS (with extracted $shadow-stack-N variables), Tailwind arbitrary-value class, React inline-style (with useState for hover), Vue scoped CSS — and copy.

</>

CSS box-shadow syntax

Property	Description
`offset-x`	Horizontal distance — positive moves right, negative moves left.
`offset-y`	Vertical distance — positive moves down, negative moves up.
`blur-radius`	Higher = softer edge. 0 = sharp, hard shadow.
`spread-radius`	Grows (+) or shrinks (−) the shadow size before blur.
`color`	Any CSS color — use rgba() for transparent shadows.
`inset`	Optional keyword. Turns the shadow inward (inner shadow).

</>

box-shadow snippets

Basic

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

Inset

box-shadow: inset 0 2px 8px rgba(0,0,0,0.25);

Multiple

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

drop-shadow

/* For SVG / transparent PNG cutouts use filter,
   not box-shadow — it follows the alpha channel: */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));

✓

Browser support

box-shadow is supported in every modern browser and has been since IE 9 — safe to use anywhere without a fallback.

Chrome v10+

Firefox v4+

Safari v5.1+

Edge v12+

IE v9+

✦

Pro tips

Never use pure black for shadows

Pure `#000` shadows look muddy because real shadows pick up the room's ambient light. Use a slightly hue-shifted dark — e.g. `rgba(15, 23, 42, 0.35)` (dark navy) for a bluish ambient, or `rgba(31, 17, 6, 0.35)` (dark brown) for warm interiors. The shadow reads as natural instead of placed.

Stack 2-3 layers for realistic depth

A single shadow looks flat. The "natural" floating-card look is two or three shadows: a tight, near-opaque contact shadow (1-2px blur), a mid-tone ambient (8-12px blur), and a soft diffuse glow (24-40px blur). Each layer drops in opacity as the blur grows.

Skip `spread` for realistic shadows

Real light doesn't spread — `spread > 0` makes a shadow grow uniformly outward, which never happens in physical reality. Reserve positive spread for stylized effects (glows, halos); use blur alone for anything photo-realistic.

box-shadow does NOT trigger layout

Unlike `outline` and `border`, `box-shadow` is painted outside the element's box without affecting layout — so adding a shadow on hover never shifts surrounding content. This is what makes it perfect for hover-lift animations without "click-jacking" the layout.

Avoid `will-change: box-shadow`

It tempting but counterproductive — `box-shadow` is already a paint-only property and the browser handles it fine on its own. `will-change: box-shadow` creates a compositor layer just for the shadow, which spikes memory and often makes animations LESS smooth, not more.

For SVGs and cutouts: filter: drop-shadow

box-shadow follows the element's rectangle, not its visible shape. On a transparent SVG icon or a PNG with cutouts, the shadow looks visibly wrong (a rectangle outline of the bounding box). Use `filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25))` instead — it follows the alpha channel.

Hover-lift via transition: box-shadow

The Stripe-card hover-lift effect is built from two shadow states: a softer resting shadow and a more pronounced hover shadow, animated via `transition: box-shadow 200ms ease`. Flip the "Enable hover variant" toggle in the generator and the export ships both states + the transition — paste the CSS, attach the class to a card, get the effect for free.

Material elevation is calibrated science

Material Design's elevation system (1dp, 2dp, 4dp, 8dp, 16dp, 24dp) ships specific 3-layer shadow stacks at calibrated opacities for each level — it's not arbitrary. The "Material 8dp" preset in the generator matches the MD2 spec exactly. Use these for any UI that wants to feel "Material" without having to memorize the opacity values.