Box Shadow Generator
Design box shadows visually — offsets, blur, color, copied as CSS.
How to use Box Shadow Generator
- Set the offsets — X usually 0, Y positive (light comes from above).
- Add blur generously and opacity sparingly — soft and faint reads as real.
- Adjust spread only if the shadow must grow/shrink beyond the element's outline.
- Copy the CSS — and consider layering a second, tighter shadow for realism.
What is Box Shadow Generator?
A box shadow generator turns sliders into box-shadow CSS: horizontal and vertical offset, blur radius, spread and color/opacity, previewed live — the four-value syntax (box-shadow: 0 4px 12px rgba(0,0,0,0.15)) whose numbers nobody guesses right the first time.
Shadows are how flat UIs express depth: a card "floats" above the page exactly as much as its shadow implies. The difference between amateur and polished is almost always softness — real shadows are large-blur, low-opacity and slightly downward; harsh dark small-blur boxes scream default.
About the Box Shadow Generator
Drag the sliders — X/Y offset, blur, spread, color and opacity — watch the shadow render live, and copy the CSS when it feels right.
Recipes that always work: subtle card elevation is 0 2px 8px rgba(0,0,0,0.1); a hover-lift pairs a bigger shadow (0 8px 24px rgba(0,0,0,0.15)) with a tiny translateY; modal/popover prominence takes 0 16px 48px rgba(0,0,0,0.2). The physics intuition: higher elevation = bigger Y offset + more blur + LESS opacity — light spreads as distance grows. Colored shadows (a brand-tinted glow under a button) come from swapping the black rgba for the brand color at low alpha.
Layering is the pro move the syntax supports: two or three comma-separated shadows (one tight and dark, one large and faint) mimic real light far better than any single shadow — Material Design's elevations are built exactly this way.