⌘ K
box-shadow · multi-layer · inset · live preview · css

Build a layered box-shadow

Visual editor for CSS <code>box-shadow</code> with multi-layer and inset support. Live preview updates as you tweak.

Box Shadow Generator
Layers
2
stacked
Inset
0
of total
Max blur
15px
softness
Status
ready
live
input · color
Layers
output · preview
Live preview
box-shadow:
  0px 4px 6px -1px rgba(0,0,0,0.1),
  0px 10px 15px -3px rgba(0,0,0,0.1);
Quick Start

How to build a box-shadow

Stack one or more layers, tweak offsets and blur, copy the resulting CSS string.

  1. 01

    Add layers

    CSS box-shadow accepts a comma-separated list of shadows. One layer gives a flat drop-shadow; two or more compose into believable multi-layer elevation — a tight ambient shadow plus a softer key shadow is the Material recipe.

    Click + Layer to push a new entry; remove or reorder per layer. There’s no practical cap, but real designs rarely need more than three layers.

    CSS3multi-layercomma-separatedelevation
    input · layersstacked · 2
    layer 1: tight
layer 2: soft
    2 layerselevation-ready
  2. 02

    Tune offsets, blur, spread

    The four numeric inputs map to the CSS spec: x and y offset the shadow horizontally and vertically, blur softens the edge, and spread grows (positive) or shrinks (negative) the shadow before blurring.

    Realism trick: keep y larger than x for a believable overhead light source, and use a small negative spread on the wide layer to keep the bottom edge tight.

    x · yblurspreadnegative spread
    config · 4 axesx y blur spread
    0px 10px 15px -3px
    live previewMaterial-style
  3. 03

    Pick colors and inset

    Use rgba() or hsl()/0xFFFFFFAA with a low alpha for soft, photographic shadows — pure black at full opacity reads as cartoonish. A 10–20% alpha is typical.

    Toggle inset to push the shadow inward, useful for recessed inputs, pressed buttons, or that classic neumorphic carve.

    rgbaalphainsetneumorphism
    config · colorrgba · inset
    rgba(0,0,0,0.10)
inset: false
    photographicready
  4. 04

    Copy CSS

    The output is a single box-shadow: declaration — paste straight into a stylesheet, styled-components template, Tailwind arbitrary value, or a design-system token file.

    Generated locally; preview, declaration, and clipboard payload are byte-identical.

    clipboardCSS3Tailwindstyled-components
    export · css1 declaration
    box-shadow:
  0 4px 6px -1px rgba(0,0,0,.1),
  0 10px 15px -3px rgba(0,0,0,.1);
    ready to shipsuccess
Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don&rsquo;t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn&rsquo;t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Related toolsText ShadowNeumorphismGradientMesh GradientColor PickerColor Converter
Use Cases

When to design box-shadows

Cards, buttons, popovers, depth language.

Material elevations

Stack two shadows for the classic Material elevation feel. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Cards & popovers

Soft drop-shadows for floating UI surfaces. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Inner shadows

Inset shadows for pressed buttons and recessed inputs. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Tokens

Persist named shadows in your design system docs. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick iteration

Sliders beat hand-editing shadow strings. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Copy directly into CSS / styled-components / Tailwind config. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token
FAQ

Frequently asked questions

One layer alone is too sharp. A close subtle + further blurred shadow gives the elevation illusion.
Positive spread grows the shadow before blurring; negative shrinks it.
Yes — toggle inset on a layer to push the shadow inward (like a recessed input).
Browsers composite box-shadow on GPU. Heavy blur values can still cost paint time though.
No — the CSS is generated locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!