xtract.bot

Apps / CSS Generators / Box Shadow Generator

CSS Box Shadow Generator

Stack multiple shadow layers to build elevation, glow, or neumorphic effects. The output is a single comma-separated box-shadow value.

Layers (2)

#1
#2

Presets

Drop shadows

Material Design elevation

Tailwind CSS shadow equivalents

Glow & light

Inset & pressed

Skeuomorphic & decorative

CSS value
box-shadow: 0px 12px 30px -8px rgba(15, 23, 42, 0.2), 0px 4px 12px -4px rgba(15, 23, 42, 0.12);

What is this?

A free CSS box-shadow generator with multi-layer stacking. Build the shadow visually with offset / blur / spread / colour / opacity / inset per layer, see the result on a live preview, copy the CSS.

Multi-layer shadows

Real-world UI shadows are almost always stacked — a tight inner shadow for the edge plus a wider soft shadow for the ambient depth. CSS supports any number of comma-separated layers in a single box-shadow value, and the order matters (first layer renders on top).

Reading a box-shadow

box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1) means: x-offset 0, y-offset 4 px (drop down), blur 12 px, spread −2 px (pull in slightly so the shadow doesn't extend past the box edges), at 10% black opacity. Add inset in front of the layer to make it an inner shadow.

FAQ

Why use spread?
Negative spread pulls the shadow in, so it doesn't stick out past the corners — useful for very low-elevation shadows on small UI. Positive spread enlarges the shadow rectangle before blurring, useful for glow effects.
Why does my shadow look harsh on dark mode?
Solid black at 10% opacity is the right call on light backgrounds but invisible / overly punchy on dark. Swap to a neutral tint that has some lightness (e.g. #0f172aat 30% alpha) for dark surfaces.
Material Design / iOS / Tailwind matches?
Use the presets in the bottom-left. Material 1–24 mirror Material Design's elevation tiers; the Tailwind shadow-sm / shadow-md / shadow-xl / shadow-2xl presets reproduce the Tailwind defaults.

Related tools