How do multiple shadows combine?

Comma-separated shadows stack from front to back; earlier list items paint above later ones, letting you mix highlights and ambient occlusion.

Spread grows or shrinks the shadow outline before blur is applied — negative spread tightens glows for crisp elevated cards.

When should I use inset?

Inset shadows fake recessed panels, pressed buttons, and neumorphic concave surfaces without extra DOM nodes.

Is neumorphism accessible?

Soft UI can fail contrast checks — pair shadows with clear labels, focus rings, and fallback borders.

Do shadows hurt performance?

Large blurs on huge elements can be costly; prefer transform-friendly layers and avoid animating spread on low-end phones unnecessarily.

How do I match design tokens?

Convert rgba values into CSS variables (--shadow-card) so theme switches stay consistent.

Can I mirror Figma drop shadows?

Map X/Y offset, blur, and spread directly; Figma's spread slider aligns with CSS spread radius when color multiply modes match.

Does the tool upload screenshots?

No — previews render locally inside the browser.

CSS Box Shadow Generator

Generate Live

Visually design CSS box-shadows and copy the rule.

About this tool

CSS Box Shadow Generator — Visually design CSS box-shadows and copy the rule. Free, fast and private. Runs entirely in your browser at Quick Calci Tools.

Examples

Common scenarios for the CSS Box Shadow Generator.

Soft card lift

layers: 1
blur: 24
spread: -4

0 12px 24px -4px rgba(15,23,42,0.18) depth cue.

Inset chip

inset: true

Inset shadow for pressed toggle states.

Who uses the CSS Box Shadow Generator?

Common scenarios and audiences for this tool.

UI engineers

Ship elevation levels that stay consistent between MUI overrides and custom cards.

Design technologists

Encode Figmotion specs as production CSS without round-tripping through plugins.

Indie game menus

Prototype glossy panels before baking textures into engines.

Presentation builders

Lift keynote-style tiles in HTML decks with subtle depth.

Bootcamp learners

See how blur kernels differ from opacity alone when mocking Material surfaces.

Frequently asked questions

Everything you need to know about the CSS Box Shadow Generator.