Question 1

What does each CSS box-shadow value mean?

Accepted Answer

The CSS box-shadow property takes up to six values: an optional `inset` keyword (paints inside the box instead of outside), `offset-x` (horizontal displacement; positive moves right), `offset-y` (vertical displacement; positive moves down), `blur-radius` (the higher this is, the softer the shadow), `spread-radius` (positive grows the shadow, negative shrinks it), and `color` (any CSS color including rgba for transparency). All six map to a slider in our generator.

Question 2

Why do real design systems use multiple layered shadows?

Accepted Answer

A single shadow looks flat and synthetic. Real-world objects have a tight contact shadow directly under them AND a softer ambient shadow extending outward. Material Design and Tailwind's shadow scale both stack 2–3 shadows at different blurs and offsets to mimic this. Our generator supports up to 8 layers so you can match any reference exactly.

Question 3

What is the difference between inset and outset (regular) shadows?

Accepted Answer

A regular (outset) shadow paints OUTSIDE the box, creating the illusion of elevation above the page. An `inset` shadow paints INSIDE the box, creating the illusion of a recessed surface — perfect for pressed-button states, inner-glow effects, and skeuomorphic UI. Both can coexist in a multi-layer stack; a glass-morphism card typically uses one outset shadow for elevation plus one inset white-1px shadow for the rim highlight.

Question 4

How is blur different from spread?

Accepted Answer

Blur softens the shadow's edge; the higher the value, the more diffuse and less defined the edge. Spread grows or shrinks the shadow uniformly before blurring — positive spread makes the shadow bigger than the box, negative spread makes it smaller. Tight `-8` spread + large blur is the recipe for that "floating just above the surface" feel popular in modern UI.

Question 5

Is my shadow configuration sent to your server?

Accepted Answer

No. The generator runs entirely in your browser. Color values, alpha levels, and exported CSS strings never reach our servers. Use it on staging UIs, pre-launch design systems, and confidential mockups without privacy concerns.

Question 6

How do I use the Tailwind v4 output?

Accepted Answer

Tailwind v4 supports arbitrary CSS values via bracket notation: `shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]`. Our exported class is escape-safe — spaces are converted to underscores and commas are preserved correctly so Tailwind's parser accepts it. Drop the class straight onto any element. For common shadows (sm, md, lg, xl, 2xl), prefer Tailwind's built-in scale; use the arbitrary value for custom multi-layer stacks.

Question 7

Why does my box shadow look wrong on dark backgrounds?

Accepted Answer

Black shadows with high alpha rely on contrast with a light surface. On a dark page they vanish into the background. Two solutions: (1) lower the alpha further (try 0.05 instead of 0.25 — soft elevation reads better than absent elevation), or (2) use a lighter, slightly saturated shadow color (a hint of the dominant background hue feels native). For pure dark-mode design systems, many teams use a colored glow (brand blue at low alpha) instead of black.

Question 8

Can box-shadow degrade performance?

Accepted Answer

Yes. Box-shadow is GPU-rendered but is repainted on every frame the element changes. Stacking many high-blur shadows on a list of 100 items can drop frame rate during scroll. Mitigations: use `transform` instead of layout changes when animating; promote shadowed elements to their own composite layer with `will-change: transform`; for very large shadows, an `::after` pseudo-element with `filter: blur()` can sometimes be cheaper. Always test scroll performance on a low-end mobile device.

Question 9

What is the difference between box-shadow and filter: drop-shadow()?

Accepted Answer

`box-shadow` paints a rectangle (or rounded rectangle) following the element's `border-box`. `filter: drop-shadow()` paints a shadow that follows the element's actual pixel silhouette — including SVG paths, transparent-PNG cutouts, and irregular shapes. Use box-shadow for ordinary card / button / panel elevation; use drop-shadow for icons, logos, and graphics where the rectangular box-shadow would look wrong.

Value	What It Does	Typical Range
inset	Paint inside the box instead of outside	Use for pressed buttons, inner highlights
offset-x	Horizontal displacement	−10 to 10 px (often 0 for natural light)
offset-y	Vertical displacement	1 to 20 px (positive = below the box)
blur-radius	Softness of the shadow edge	2 to 50 px (higher = softer)
spread-radius	Grow or shrink the shadow before blurring	−8 to 4 px (negative = tighter contact)
color	Shadow color (use rgba for alpha)	Black at 5–25% alpha is the safe default

Free CSS Box Shadow Generator: Multi-Layer, Inset & Outset

Up to 8 Stacked Layers

Full Property Control

Multi-Format Export

100% Client-Side

The Multi-Layer Box Shadow Generator for Realistic Elevation

CSS Box Shadow Property Reference

The Three-Layer Recipe Real Design Systems Use

Common Shadow Pitfalls (and How We Fix Them)

Related Design & CSS Utilities