Box Shadow Generator — multi-layer CSS shadows

Drag the sliders, pick a colour, stack layers. The CSS rule updates and previews live, ready to paste straight into your stylesheet.

What is a CSS box-shadow?

box-shadow paints a shadow around (or inside) an element's box. Each shadow has an X/Y offset, a blur radius, an optional spread, a colour, and an optional inset keyword. Stack multiple comma-separated shadows for layered, depth-ful results without needing an image.

Multi-layer shadows are the trick behind every modern card UI. A close, sharp shadow gives the illusion of contact with the surface; a softer, larger shadow further out gives the impression of elevation. Combining the two reads as 'lifted' the same way real-world objects do.

How to use this tool

Pick a starting preset (subtle, card, lifted, inset) or build from scratch with the default single layer.
Add layers (up to four), and for each set X/Y offset, blur, spread, colour and the inset toggle if you want the shadow inside the element.
Copy the CSS rule from the preview pane and paste it into your stylesheet's box-shadow property.

Frequently asked questions

How many shadow layers can I stack?

CSS itself imposes no limit, but rendering cost grows with each layer. Two or three layers cover almost every realistic depth effect; this tool caps at four to keep things readable.

What does 'spread' do exactly?

Spread inflates (positive) or contracts (negative) the shadow before the blur is applied. Spread of 5 makes the shadow bigger by 5 pixels in every direction; -5 shrinks it by the same amount. Useful for tight, contained shadows or for cancelling the natural fade of blur.

When should I use inset?

Inset shadows draw inside the element instead of outside. Use them to suggest a recessed or pressed state — for example, a button that depresses on click, or a 'inner card' that appears carved into the background.

How do I make shadows that work in dark mode?

Lower opacity dramatically — 0.10-0.15 instead of 0.25 — and prefer pure black with very low alpha. White or light shadows around dark content can also imply elevation but feel more neon than realistic.

Will my shadow be performant on mobile?

A single layer with reasonable blur is essentially free. Heavy multi-layer shadows on hundreds of elements scrolling can hurt; if you hit a perf wall, switch the heavy decorative shadow to an SVG filter or a static PNG.

Common use cases

Where a well-tuned shadow makes the UI feel polished.

Cards and panels

A two-layer 'lifted' shadow gives a card the appearance of floating above the page, far cheaper to render than an SVG filter and matching what users expect from native UIs.

Modals and tooltips

A larger, softer shadow signals that the element sits well above the rest of the page. Increase the Y offset and blur for these to read as 'highest layer'.

Pressed-button states

Switch to inset on :active to give the button a tactile press feel. Pair with a slight downward Y translate for the most convincing effect.

Subtle dividers and grouping

A 1-2px shadow with very low alpha can replace a hairline border for grouping items, with the bonus of better visibility on complex backgrounds.

Tips and shortcuts

Small habits that keep shadows from looking dated.

Stack two layers, not one

A single big blurry shadow looks soft but flat. Pairing a small tight shadow (contact) with a larger soft one (ambient) reads as real-world depth.

Keep alpha low

Most modern designs keep shadow alpha under 0.20. Higher values look like the era of skeuomorphism. Compensate with more blur for a smoother fade if the shape feels too hard.

Match the light source

Pick a single light direction (usually top-down) for your whole UI. Mixing 'sunlight from the upper-left' with 'lamp from the lower-right' across components looks chaotic.

Use box-shadow for borders too

box-shadow: inset 0 0 0 1px <color> creates a perfect inner border that doesn't shift layout the way a border property does. Useful for hover/focus rings on inputs.