CSS box shadow generator
Shape a shadow with sliders and copy the CSS.
Box and background
Runs in your browser. Nothing you type is sent anywhere.
- Stack up to 8 layers
- Inset shadows
- 6 ready-made presets
How to make a CSS box shadow
- Start from a preset, or move the offset, blur and spread sliders.
- Add layers for a softer, more natural shadow.
- Copy the box-shadow line into your CSS.
What each box-shadow value does
| Value | Meaning | Typical range |
|---|---|---|
| Offset X | Moves the shadow right, or left if negative | -100 to 100px |
| Offset Y | Moves the shadow down, or up if negative | -100 to 100px |
| Blur | Softens the edge; 0 gives a hard-edged shadow | 0 to 200px |
| Spread | Grows or shrinks the shadow before it is blurred | -100 to 100px |
| Opacity | How solid the shadow color looks | 10 to 30% for a natural look |
Starting values for common looks
| Preset | Offset Y | Blur | Spread | Opacity |
|---|---|---|---|---|
| Soft | 10px | 30px | -5px | 20% |
| Sharp | 6px (also X) | 0px | 0px | 100% |
| Glow | 0px | 24px | 4px | 55% |
| Inset | 2px | 6px | 0px | 25% |
Layered and Floating build on these by stacking two or three shadows at once, which a single layer cannot reproduce.
Tips for natural-looking shadows
- Real light rarely casts a pure black shadow. Use 10 to 30 percent opacity, and lean the color toward the background's hue for a softer result.
- Stack 2 or 3 shadows: a small, tight one close to the box and a larger, blurrier one further out, the way the Layered and Floating presets are built.
- Negative spread with a large vertical offset gives the floating card look common in modern interfaces.
- A parent with overflow: hidden clips a shadow exactly like it clips content, so add padding to the parent rather than removing overflow everywhere.
Box shadow generator FAQ
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius and color. Positive offsets move the shadow right and down, and the inset keyword draws it inside the box.
How do I make a shadow look natural?
Stack two or three soft shadows with low opacity: a small, tight one close to the box and a larger, blurrier one further out. Real shadows are rarely pure black at full strength.
What does spread do?
Spread grows or shrinks the shadow before it is blurred. A negative spread with a large vertical offset gives the floating card look.
Why is my shadow cut off?
A parent element with overflow: hidden clips anything drawn outside its box, shadows included. Add padding to the parent or remove the overflow setting.
How many shadow layers can I stack?
Up to 8 on this page. CSS itself has no fixed limit on box-shadow layers, but more than 3 or 4 rarely looks any different and costs more to paint.
Does a box shadow change an element's size or spacing?
No. A box-shadow is purely visual and never affects layout, unlike a border or outline, so neighboring elements never shift when you add or resize one.