CSS Shadow Generator

Reference

What is CSS box-shadow?

The box-shadow CSS property adds one or more shadow effects around an element's frame. It is defined by offsets relative to the element, blur and spread radii, color, and an optional inset keyword. Multiple shadows are separated by commas and rendered front-to-back — the first shadow sits on top.

box-shadow syntax

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Horizontal distance. Positive = right, negative = left.
offset-y: Vertical distance. Positive = down, negative = up.
blur-radius (optional, default 0): Larger values produce a softer, more diffused shadow.
spread-radius (optional, default 0): Positive values expand the shadow, negative values shrink it.
inset (optional): Moves the shadow inside the element's box.

Using multiple shadow layers

Combining multiple shadows creates realistic depth effects. A common technique is to pair a tight, dark shadow close to the element (for definition) with a large, faint shadow further away (for depth). Material Design and modern design systems use layered shadows to communicate elevation — higher elements have larger, softer shadows.

Design tips for shadows

Use rgba() or hsla() colors — semi-transparent shadows look more natural than opaque ones. A shadow at rgba(0,0,0,0.15) looks more realistic than #000.
Match your light source — keep offset direction consistent across your UI. If light comes from the top-left, use positive X and positive Y offsets everywhere.
Avoid pure black — use a dark tint of your brand color or a neutral gray for softer, more cohesive shadows.
Performance — box-shadow triggers paint operations. On elements that animate frequently, prefer filter: drop-shadow() or transform for better GPU compositing.

Privacy

All shadow generation runs 100% in your browser. No data is sent to any server.