About css box shadow generator
Shadows give cards, buttons and menus a sense of depth. The CSS box-shadow property takes offset, blur, spread and a colour.
What each value does
- Horizontal and vertical offset move the shadow right and down (negative values go left and up).
- Blur softens the edge. A larger blur gives a gentler shadow.
- Spread grows or shrinks the shadow before blurring.
- Colour and opacity set how strong it looks. Soft, low-opacity shadows usually look more natural.
Layering
Real shadows have a tight dark part close to the object and a wide soft part further away. You can combine several shadows separated by commas for a more realistic look.
A worked example
A soft card shadow might be 0 4px 12px rgba(0, 0, 0, 0.12). That means no sideways offset, a 4 pixel drop, a 12 pixel blur and a very light black. Raising the offset and blur to 0 12px 32px gives the impression that the card is floating higher.
Mistakes to avoid
- Using fully black shadows at high opacity, which look heavy and dated.
- Using one huge shadow instead of layering two or three small ones.
- Forgetting that shadows are not clipped by the element's own border radius unless the radius matches.
