CSS Box Shadow Generator

How to Use the CSS Box Shadow Generator

1. Drag the sliders to set H-offset (horizontal), V-offset (vertical), Blur, and Spread.
2. Pick a color and adjust its opacity — low opacity (0.1–0.25) almost always looks better than full black.
3. Toggle Inset to push the shadow inside the element for a pressed or recessed look.
4. Click + Add Shadow to stack multiple layers. Real-world elevation almost always uses 2–3 shadows.
5. Click Copy to copy the generated box-shadow CSS to your clipboard.

The CSS box-shadow Property

The box-shadow property adds one or more drop shadows to an element. The syntax is:

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

• offset-x / offset-y — how far the shadow sits from the element. Positive Y pushes the shadow down.
• blur-radius — how soft the edge is. 0 is a hard edge; higher is softer.
• spread — positive values grow the shadow, negative values shrink it. Useful for "glow" effects.
• color — any CSS color. rgba() lets you control opacity.
• inset — optional keyword to render the shadow inside the box instead of outside.

Popular Box Shadow Recipes

Material Design Elevation

/* Elevation 2 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Elevation 8 */
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

Material's elevation model stacks a tight shadow (for definition) with a wider, softer one (for ambient light). Two shadows almost always beat one.

Soft Card Shadow

box-shadow: 0 4px 24px rgba(0,0,0,0.08);

A go-to for marketing sites. Low opacity, generous blur, small vertical offset — enough to float the card without looking heavy.

Neumorphism

box-shadow: 8px 8px 16px rgba(0,0,0,0.15), -8px -8px 16px rgba(255,255,255,0.7);

Two opposing shadows — one dark, one white — make the element look extruded from the background. Works best on mid-gray backgrounds.

Inner Shadow (Pressed Input)

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Focus Ring

box-shadow: 0 0 0 3px rgba(59,130,246,0.4);

Use spread instead of blur for a crisp, accessible focus outline. No offset, no blur, pure spread.

Box Shadow Performance Tips

• Avoid animating box-shadow directly. It repaints every frame. Animate opacity on a pseudo-element containing the shadow instead for 60fps smoothness.
• Large blur radius on mobile can drop frame rate. Keep blur under 40px on animated elements.
• Multiple layers compound cost. Two soft shadows look better than one huge shadow — and are usually faster.

box-shadow vs drop-shadow vs filter

box-shadow applies to the element's bounding box. filter: drop-shadow() follows the actual pixel shape, which is what you want for non-rectangular shapes (SVG icons, images with transparency). Use box-shadow for cards, buttons and inputs; use drop-shadow for logos, badges, and illustrations.

Related CSS Tools

Design full backgrounds with the CSS gradient generator, convert colors with the hex to RGB converter, and shrink your stylesheet with the CSS minifier.