CSS Box Shadow Generator

When do you need a CSS box-shadow generator?

What this tool does

This CSS box-shadow generator builds layered shadows with visual controls for offset, blur, spread, color, and inset mode. Stack multiple layers for realistic lighting — ambient plus key shadow, or outer plus inset for pressed buttons. Copy production-ready CSS or export a preview image for design handoff.

Why you need it

Box shadows create depth, hierarchy, and tactile feedback in UI. The syntax — offset-x offset-y blur spread color repeated comma-separated — is easy to mistype and hard to visualize from numbers alone. A live preview lets you dial in elevation for cards, modals, and buttons without iterative DevTools edits.

Design systems document shadow tokens as layered stacks; this tool makes experimenting with those stacks fast. Everything renders locally in your browser.

Elevation also communicates interaction state — a card that lifts slightly on hover, or a button whose shadow flattens when pressed, gives users feedback without extra motion or color changes. Getting that feedback to feel physically plausible usually takes a few rounds of tweaking offset and blur together, which is far faster with a live preview than repeated file saves and browser reloads.

How to use it

1. Add one or more shadow layers from the Layers panel.
2. Adjust offset X/Y, blur, spread, color, and inset for each layer.
3. Watch the live preview box update as you drag sliders or type values.
4. Copy the generated CSS or export a preview image for design handoff.

Practical examples

• Card elevation: Outer shadow with 0px 4px 12px rgba(0,0,0,0.08) for a subtle floating card on a light background.
• Pressed button: Inset shadow inset 0 2px 4px rgba(0,0,0,0.2) combined with a flat outer shadow for a tactile click state.
• Neumorphic panel: Two layers — light offset top-left and dark offset bottom-right — on a matching background color.
• Focus ring alternative: Zero-offset spread shadow in brand color as an accessible focus indicator without outline quirks.
• Hover lift: A soft, larger-blur shadow that swaps in on hover to make a clickable card feel like it rises off the page.

How it works

Each shadow layer is a CSS box-shadow value: horizontal offset, vertical offset, blur radius, spread radius, and color, optionally prefixed with inset. Multiple layers are comma-separated; the first layer paints on top. Blur softens edges; spread expands or contracts the shadow shape before blurring.

The preview applies the combined declaration to a sample box so you see the result immediately. Copied CSS matches exactly what the preview renders — paste into any stylesheet or CSS-in-JS block.

Rendering cost matters at scale: every shadow forces the browser to rasterize a blurred layer behind the element, and stacking several shadows on many list items can measurably slow scrolling on low-end phones. Where possible, apply expensive multi-layer shadows to a handful of prominent elements — hero cards, modals, dropdowns — rather than every row in a long list.

Common mistakes

• Too much blur on small elements: Large blur values on 24px icons create muddy halos — keep blur proportional to element size.
• Ignoring background color: Shadows on dark backgrounds need lighter, lower-opacity colors to remain visible.
• Over-stacking layers: More than three layers rarely adds value and increases paint cost on low-end devices.
• Forgetting inset for input fields: Search bars and text inputs often look better with inset shadows than outer elevation.
• Applying heavy shadows everywhere: Multi-layer shadows on every card in a long list add up in paint cost — reserve elaborate stacks for a few prominent elements.
• Using pure black at high opacity: A harsh rgba(0,0,0,0.8) shadow looks unnatural — real shadows are softer and tinted by ambient light, so lower opacity reads more convincingly.

FAQ

Related tools

• Border Radius Generator
• CSS Gradient Generator
• CSS Filter Generator
• Color Converter