CSS Box Shadow Generator

Overview

Design CSS box shadows visually with offset, blur, spread, color, and opacity controls, then copy the resulting CSS. Useful for cards, modals, and depth effects.

How to use

1. Adjust horizontal and vertical offsets.
2. Tune blur, spread, color, and opacity while watching the preview.
3. Copy the generated box-shadow CSS into your project.

Examples

• Card elevation

  Input: 0px / 4px offset, 12px blur, low opacity

  Output: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

• Focus glow

  Input: 0 offset, large blur, brand color

  Output: A soft colored glow for highlighted elements.

Notes

• Box shadows are purely visual and do not affect layout.
• Animating box-shadow can be slow; prefer animating opacity or transform.
• Subtle shadows with low opacity usually look more natural than dark, hard ones.

FAQ

What does the spread value do?

Positive spread expands the shadow in every direction before blur is applied; negative spread shrinks it.

Can I layer multiple shadows?

Yes. CSS accepts comma-separated shadows. Generate each layer here and combine them manually.

Do shadows hurt performance?

Static shadows are GPU-accelerated and cheap. Heavy animated shadows are the main thing to avoid.

Embed this tool

Paste this iframe into any HTML page to embed CSS Box Shadow Generator on your site: