simpletool.io Browse tools

CSS Box Shadow Generator: Multi-Layer Depth [2026]

CSS Box Shadow Generator featured graphic showing a cream card with a soft layered drop shadow on a navy background

Written by

Simple Tool

in

,
TL;DR: A CSS box shadow generator builds box-shadow declarations visually — drag offset, blur, spread, and colour sliders to design the shadow, copy the CSS. Modern UI uses multi-layer shadows (2-3 stacked) for realistic depth: a tight close shadow for grounding plus a soft far shadow for ambient. Our free generator handles inset, multi-layer stacks, and exports paste-ready CSS or Tailwind utilities.

Shadows are the lazy designer’s depth cue. Drop a 4-pixel grey shadow under any card and the card looks “lifted” off the page. Drop the wrong shadow and the card looks like it’s from 2015. The difference between professional and amateur UI in 2026 isn’t whether you use shadows — it’s whether you stack two or three layers to mimic how real light works. A box-shadow generator with multi-layer support is the fastest way to get there.

Our CSS box shadow generator ships with a live preview, multi-layer support, inset toggle, and export as either vanilla CSS or Tailwind arbitrary-value classes. This guide explains the five box-shadow parameters, why multi-layer shadows look more realistic than single-layer ones, the modern Material Design 3 elevation tokens, and the performance gotchas that make heavy-shadow pages laggy on mobile.

The five parameters that define a box-shadow

Parameter Effect Typical range
Horizontal offset (x) Shadow shifted right (positive) or left (negative) −2 to 2 px (subtle), 0 for centred
Vertical offset (y) Shadow shifted down (positive) — typical for “lifted” cards 2-30 px depending on elevation
Blur radius How soft / diffuse the shadow edge is 2× the y-offset for natural softness
Spread Expands or contracts the shadow before blur. Negative = tight; positive = halo −10 to 5 px typically
Colour Shadow’s RGBA value rgba(0,0,0,0.04-0.18) for natural shadows

The single most common mistake: using rgba(0,0,0,0.5) for the shadow colour. Real shadows are far more subtle — 0.04 to 0.18 alpha is the right range. Heavy shadows look like a 2008 web aesthetic. Use multi-layer composition for depth, not a single dark shadow.

Multi-layer shadows — the modern technique

Single shadows look flat. Real-world depth has two characteristics: a tight close shadow (the ambient occlusion right next to the object) and a soft far shadow (the diffused fall-off). Modern UI mimics this by stacking 2-3 shadow layers in one box-shadow declaration:

/* Single shadow (looks flat) */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* Two-layer (realistic depth) */
box-shadow:
  0 1px 2px 0 rgba(10, 37, 64, 0.04),     /* close, tight */
  0 4px 12px -2px rgba(10, 37, 64, 0.08); /* far, soft */

/* Three-layer (premium look — Stripe, Linear, Vercel use this) */
box-shadow:
  0 1px 1px 0 rgba(10, 37, 64, 0.05),
  0 2px 4px -1px rgba(10, 37, 64, 0.08),
  0 12px 24px -8px rgba(10, 37, 64, 0.12);

The progression from one to three layers is what separates default-looking buttons from premium-looking buttons. Most modern design systems (Material 3, Apple HIG, Tailwind’s shadow-xl) ship multi-layer shadows out of the box.

Material Design elevation system — six standard levels

Material Design’s elevation system maps real-world depth to six numerical levels. Each level uses a specific multi-layer shadow stack tuned for the apparent height. Useful as a starting point for your own design system:

  • Elevation 0: no shadow (flat surfaces, page background)
  • Elevation 1: subtle lift (cards at rest, table rows)
  • Elevation 2: raised (cards on hover, primary buttons)
  • Elevation 3: floating (FABs, contextual menus)
  • Elevation 4: overlaid (dialogs, drawers)
  • Elevation 5: very prominent (modal cover, navigation drawer)

Pick three or four of these for your design system rather than letting designers invent custom shadows per component. Consistency is what makes a UI look polished.

How to use the browser box-shadow generator

  1. Open the box shadow generator
  2. Drag the x, y, blur, spread sliders. Watch the live preview update
  3. Adjust the colour picker (alpha matters — keep it subtle)
  4. Toggle inset for inner shadows (useful for pressed-button states or “carved” effects)
  5. Click + Add layer to stack a second or third shadow for realistic depth
  6. Pick a preset (Material elevations 1-5, “Stripe-style” multi-layer, “carved”, “neon glow”)
  7. Copy CSS or Tailwind output

Performance — when shadows hurt page speed

Shadows are GPU-rendered, which is fast — but not free. A handful of shadows on hero elements is invisible cost. Hundreds of shadows in a feed-style listing produces visible jank on mid-range mobile devices.

  • Don’t apply heavy multi-layer shadows on 50+ scrolling cards. Use a single subtle shadow per card, save the multi-layer treatment for hero elements.
  • Avoid animating shadows. Animating the box-shadow property forces re-layout on every frame. Animate a wrapper’s transform: scale or translateZ instead, with a static shadow.
  • Inset shadows on text-heavy elements. Inset shadows trigger a different rendering path. Avoid stacking many on form inputs or text areas.
  • Use will-change: box-shadow sparingly. Promotes the element to its own layer, which uses memory. Reserve for elements you’ll definitely animate.

Common box-shadow mistakes

  • Heavy single shadows. box-shadow: 0 8px 32px rgba(0,0,0,0.4) looks like a 2010 lightbox. Use multi-layer with low alpha for modern depth.
  • Coloured shadows by default. Black or near-black shadows are correct for ~95% of cases. Coloured shadows (matching the element) work for hero/marketing elements but look weird on body content.
  • Wrong blur-to-offset ratio. Blur should be roughly 2× the y-offset for natural softness. 0 4px 4px (1:1) looks tight and harsh; 0 4px 8px (1:2) looks natural; 0 4px 24px (1:6) looks dreamy/soft.
  • No spread on outset shadows. Negative spread tightens the shadow and prevents it bleeding past the element bounds — useful for cards in tight grids.
  • Forgetting dark mode. Black shadows on a dark background are invisible. Use slightly lighter shadows or rely on borders + brightness for depth in dark mode.

Frequently asked questions

What’s the difference between box-shadow and drop-shadow?

box-shadow draws a shadow that follows the element’s bounding box (rectangle, even if the element has rounded corners). filter: drop-shadow() follows the element’s actual visual shape, including transparency in PNG images and SVG paths. For UI cards, box-shadow is correct. For PNG icons or SVG logos, drop-shadow is correct.

Can I animate box-shadow smoothly?

Browsers can transition box-shadow but it’s expensive. For smooth hover-state lifts, animate a wrapper’s transform: translateY(-2px) with a static shadow instead. The visual effect is identical but the GPU cost is much lower.

Why does my shadow look pixelated on retina displays?

This usually happens when blur is too small relative to retina pixel density. Increase blur to at least 4px (which becomes 8 retina pixels) for smooth edges. Sub-pixel blur is interpreted differently across browsers.

How many shadow layers should I stack?

Two for most cases (close + far). Three for hero/premium elements where realistic depth matters. Four+ rarely improves the visual and adds GPU cost. Material Design’s heaviest elevation uses three.

Will the generator output Tailwind utilities?

Yes — the tool exports both vanilla CSS and Tailwind arbitrary-value class strings. Tailwind v3 also has built-in shadow utilities (shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl) that approximate Material elevations 1-5.

Is the box-shadow data sent anywhere?

No. The generator runs entirely in your browser — slider values, preview rendering, and the CSS output all stay on your device.

Related tools and guides

 

More posts