CSS Box Shadow Generator
Build single or stacked CSS box shadows with live preview.
Design realistic CSS box shadows visually. Adjust offset, blur, spread, color and alpha; toggle inset; stack multiple shadows for soft, layered material-style effects, then copy the ready-to-paste box-shadow CSS.
Common use cases
- Design a soft layered card shadow for a hero section
- Build inset shadows for pressed-button states
- Create neon glow effects by stacking colored shadows
- Match a Figma drop shadow exactly for cross-tool parity
Frequently asked questions
Can I stack multiple shadows?▾
Yes — add as many layers as you like. The output joins them with commas, exactly as the CSS spec expects.
What's the difference between blur and spread?▾
Blur softens the edges; spread expands or contracts the shadow's solid size before blurring. Use spread for tight halos and blur for soft penumbras.
How do I get a Figma-like 'elevation' shadow?▾
Stack two shadows: a small tight one (e.g. 0 1px 2px rgba(0,0,0,0.1)) plus a larger softer one (0 4px 8px rgba(0,0,0,0.05)).
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.