CSS Box Shadow
Generator

Shape depth with separate control over offset, blur, spread, color, and opacity. Use the preview to judge the shadow against its actual background before copying the CSS.

Box Shadow

Gradient Presets

Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
Gradient shadow
01

Best uses

Use shadows to separate cards from the page, emphasize floating panels, and signal interactive surfaces like menus or dialogs.

  • Keep the strongest shadows for primary surfaces.
  • Use subtle shadows for dense dashboards and data cards.
  • Treat inner shadows as a special case, not a default.
02

What to avoid

Too much blur, too much spread, or too many shadow layers makes the interface feel soft and low-contrast rather than elevated.

  • Do not stack multiple heavy shadows on every component.
  • Avoid shadows that fight the background color.
  • Prefer a smaller number of clearly different elevation levels.
03

How to choose

Pick the level of depth based on what the element does in the layout. A button should not look like a modal, and a card should not look like a floating sheet unless that is the intent.

  • Buttons need a clear hover and focus state.
  • Cards should read as content containers, not chrome.
  • Dialogs and overlays need the highest contrast separation.
Questions
Should every card have a shadow?

No. A flat card can be the right answer when the page is already visually busy. Add shadow when it improves separation or focus.

What makes a shadow feel expensive instead of muddy?

Controlled blur, a small number of layers, and a clear relationship to the page background. Shadows should reinforce structure, not replace it.