Box Shadow Generator

CSS Box Shadow

The box-shadow CSS property adds shadow effects around an element's frame, giving it depth and visual hierarchy. Shadows are one of the most effective ways to create a modern, layered UI without adding extra HTML elements. You can stack multiple shadows, use inset for inner shadows, and fine-tune blur radius, spread distance, and color opacity.

Syntax

box-shadow: [inset] x-offset y-offset blur spread color;

• x-offset — Horizontal distance of the shadow. Positive values push it right, negative values push it left.
• y-offset — Vertical distance. Positive pushes down, negative pushes up.
• blur — How soft the shadow edges are. Higher values create a more diffused shadow.
• spread — Expands or contracts the shadow size. Positive values grow it, negative values shrink it.
• color — Shadow color, typically with transparency using rgba or hsla for realistic effects.

Tips for Better Shadows

Use subtle, layered shadows instead of a single heavy shadow. Combine a tight, dark shadow for definition with a softer, wider shadow for ambient depth. Avoid pure black — use dark, slightly tinted colors with low opacity for a more natural look. The best box shadows are barely noticeable but make the entire design feel polished.

Frequently Asked Questions