Box Shadow Generator

Compose layered outer or inset shadows from seven design presets, tune offsets, spread, colour and opacity, preview the surface live, and copy or download paste-ready CSS.

DESIGN & COLOR · LOCAL WORKBENCH · BROWSER WORKSPACE

Build a preview you can inspect.

Compose layered outer or inset shadows from seven design presets, tune offsets, spread, colour and opacity, preview the surface live, and copy or download paste-ready CSS.

01 · SHAPE THE SHADOW2 LAYERS

StageSurfaceCorner radius · 18px

Layer recipe

Layer 01 Inset

X offsetY offsetBlurSpread

Shadow colourOpacity · 12%

Layer 02 Inset

X offsetY offsetBlurSpread

Shadow colourOpacity · 16%

Why designers stack layers

A tight, low-opacity contact shadow anchors the surface. A softer, wider layer suggests lift. Negative spread pulls the edge inward before blur.

02 · LIVE SURFACECSS BOX MODEL

PREVIEW SURFACELayered depthAdjust a layer to see the edge change.

2 layers build more natural depthA tight layer says where the object touches; a softer layer suggests how far it floats.

CSS OUTPUTReady to paste into a stylesheet

box-shadow:
  0px 1px 3px 0px rgba(15, 23, 42, 0.12),
  0px 8px 24px -4px rgba(15, 23, 42, 0.16);

◎

Runs in this browser. Results are estimates or editing cues. Review the assumptions and source-specific limits before using them in a consequential decision.

Back to the tool library ↗

Need a feature from the original version? Open the current ECECH tool

How this app works

Compose layered outer or inset shadows from seven design presets, tune offsets, spread, colour and opacity, preview the surface live, and copy or download paste-ready CSS. Results update as you adjust inputs and stay in this browser.