About the Box Shadow Generator
Build the perfect shadow with live preview. Stack up to five layers, adjust offset, blur, spread, color and opacity, try presets like soft, layered or neumorphic, and copy the CSS or Tailwind class.
Key features
- Up to 5 shadow layers
- Offset, blur, spread and opacity
- Inset shadows
- Soft, layered, glow and neumorphic presets
- Preview on your own colors
- CSS and Tailwind class
Design realistic shadows
Shadows show which elements sit above others and make buttons and cards feel clickable. Adjust the sliders and watch the preview, or start from a preset and tweak it.
Box shadow syntax
box-shadow: [inset] x-offset y-offset blur spread color;
| Value | Meaning |
|---|---|
| x-offset | Moves the shadow right (positive) or left |
| y-offset | Moves the shadow down (positive) or up |
| blur | How soft the edge is |
| spread | Grows (positive) or shrinks the shadow |
| inset | Puts the shadow inside the element |
Tips for natural shadows
- Use low opacity (5–20%) black, or a dark version of the background color.
- Light usually comes from above, so use a positive Y offset and little or no X offset.
- Combine a small, sharp layer with a large, soft one.
Related tools
CSS gradient generator, color palette generator and CSS minifier.
How to use the Box Shadow Generator
- Enter a color code, use the picker, or start from a preset.
- Adjust the options; the preview updates instantly.
- Check the result, including contrast and how it looks in context.
- Copy the CSS, Tailwind or HEX code, or download it.