Designing card or modal elevation that doesn't look "cheap and harsh". Building a focus-ring style for accessibility (e.g. a 2px outline glow). Crafting a neon or glow effect for a hero CTA. Replicating Material Design or Apple-style elevation tokens for a design system. Making fake "inset" depth for a pressed-button effect or a card recess.

X / Y offset — direction the shadow falls (positive Y = down). For a "light from above" feel, use Y > 0 and small or zero X. Blur — how soft the edge is. 0 = sharp; larger = softer fade. Spread — how much bigger (or smaller, if negative) the shadow is than the box itself. Color & alpha — usually a partial-alpha black or brand color. Pure #000 looks too heavy; try #0003 to #0002 for natural depth. Inset — flips the shadow inward, like a recess.

One big shadow looks artificial. Real elevation is two or three layers stacked: a tight, dark, close-in shadow plus a wide, soft, far-out one. The "Material elevation" preset shows the pattern. Pure black is too heavy. Use ~10–25% alpha black, or tint the shadow with the surface's complement for warmth. Shadows render outside the box. If your container has overflow: hidden , the shadow is clipped. Use a wrapper or move overflow to a child. Shadow on transparent background. If the box has no background , the shadow shows through the box itself — usually surprising. Performance: very large blur on lots of elements can be expensive on low-end mobile. Test on a real device before shipping fancy glows. Dark mode. Subtle dark-on-dark shadows almost disappear; consider a bright inner border or a light-tinted shadow in dark themes.

CSS Box-Shadow-Generator

Erstelle einzel- oder mehrlagige CSS-Box-Shadows visuell. Offset, Blur, Spread, Farbe einstellen und CSS kopieren.

Shadow layers

Preview

Sample

CSS

What is this for?

The CSS box-shadow property is the workhorse for adding depth — drop shadows on cards, button highlights, focus rings, glows, neon effects, even fake 3D. The syntax (x y blur spread color, optional inset, multiple shadows comma-separated) is easy to read but tedious to tweak blind. This tool gives you sliders for every value and a live preview, plus presets that match common design-system elevations.

When to use it

Designing card or modal elevation that doesn't look "cheap and harsh".
Building a focus-ring style for accessibility (e.g. a 2px outline glow).
Crafting a neon or glow effect for a hero CTA.
Replicating Material Design or Apple-style elevation tokens for a design system.
Making fake "inset" depth for a pressed-button effect or a card recess.

What each value does

X / Y offset — direction the shadow falls (positive Y = down). For a "light from above" feel, use Y > 0 and small or zero X.
Blur — how soft the edge is. 0 = sharp; larger = softer fade.
Spread — how much bigger (or smaller, if negative) the shadow is than the box itself.
Color & alpha — usually a partial-alpha black or brand color. Pure #000 looks too heavy; try #0003 to #0002 for natural depth.
Inset — flips the shadow inward, like a recess.

Common gotchas

One big shadow looks artificial. Real elevation is two or three layers stacked: a tight, dark, close-in shadow plus a wide, soft, far-out one. The "Material elevation" preset shows the pattern.
Pure black is too heavy. Use ~10–25% alpha black, or tint the shadow with the surface's complement for warmth.
Shadows render outside the box. If your container has overflow: hidden, the shadow is clipped. Use a wrapper or move overflow to a child.
Shadow on transparent background. If the box has no background, the shadow shows through the box itself — usually surprising.
Performance: very large blur on lots of elements can be expensive on low-end mobile. Test on a real device before shipping fancy glows.
Dark mode. Subtle dark-on-dark shadows almost disappear; consider a bright inner border or a light-tinted shadow in dark themes.