tools.junyo.dev

multi-layer box-shadow CSS

Multi-layer CSS box-shadow: how to create shadows with real depth

The CSS `box-shadow` property accepts a comma-separated list of shadows. Order matters: the first shadow in the list sits on top of the others. Realistic shadows in modern design use three to five layers with very low opacity (3–15%) instead of a single dark shadow, because that is how light behaves on physical surfaces — it diffuses progressively. Material Design 3 uses this technique for each elevation level.

Continue in the tool

Open full tool

More pages for this tool

Why using multiple layers changes everything

  • A single shadow with a high blur looks generic because it does not match the actual physics of light. Direct light creates a sharp shadow, diffuse light creates a soft shadow — and in real life both coexist. To replicate this, combine a layer with small blur and higher opacity (direct shadow) with another layer with large blur and very low opacity (diffuse shadow).
  • Shadow color matters as much as the numbers. Avoid pure black (#000). Use the background hue slightly darkened — for example, if the background is `hsl(220, 10%, 10%)`, the ideal shadow is around `hsl(220, 30%, 5%)` with 20–30% opacity. This produces shadows with visual "temperature" consistent with the rest of the interface.
  • Negative `spread` is underrated. With a negative spread, the shadow contracts before blur is applied — the result is a more precise shadow that appears to originate from inside the element border instead of spilling out. Combined with a positive Y offset, it creates the classic floating card effect.

Ready-to-copy shadow formulas

Floating card (3 layers)

Input
Elemento 200×100px sobre fundo claro
Expected output
box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);

Classic for cards and panels. Feeling of lightness without visual aggressiveness.

Neon effect (inset + outer)

Input
Botão sobre fundo escuro, accent verde
Expected output
box-shadow: 0 0 0 1px rgba(61,220,151,.3), 0 0 20px rgba(61,220,151,.2), inset 0 0 8px rgba(61,220,151,.1);

Technique used in dark-mode interfaces to create glow without excess.

Full tool FAQ

Yes. CSS allows as many layers as needed, separated by commas. Each layer has its own offset, blur, spread and color parameters, enabling much richer effects than a single shadow.

Frequently asked questions

What is the layer limit in box-shadow?

The CSS specification defines no limit. In practice, 4–5 layers cover all effects without noticeable performance impact.

Does inset box-shadow work like a border?

Not exactly: border occupies space in the layout, inset shadow does not. A positive-spread inset box-shadow creates an inner outline that does not affect the box model — useful for inputs and form fields.