ToolAtlas
FavoritesRecent

Box shadow generator

Processed in this browser

Text limit: 2000000 characters

This tool never uploads your input.

A card that needs a shadow that is not 0 0 20px black. You copy CSS. You still check contrast on the text inside the card.

A ticket says “make the card lift 4.” Designers reach for Figma; front-end needs box-shadow. This page writes that CSS.

Gradients are CSS gradient. Colors you are not sure about should pass contrast. rem/px math is CSS units.

Card CSS, not a token system

Offset and blur for a box-shadow snippet. Not Figma token names and not a contrast ratio — shadows do not enter WCAG contrast math. Fence samples in articles. Convert px/rem on the CSS unit page if the team’s root size is not 16.

How to use it

  1. Move offset, blur, spread, and color until the preview matches the mock.
  2. Copy the CSS. Fence it in docs:
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  1. Check the type on top of the fill, not just the shadow.

Honest limits

Not a token pipeline. Not every browser’s spread quirk documented. Not a brand audit.

FAQ

Can I export to Figma?

No. Copy CSS. Recreate the effect in Figma by hand if you must match.

inset shadows?

If the form exposes inset, use it. Otherwise this is drop-shadow territory.

Will this pass contrast?

Shadows do not fix low-contrast text. Use the contrast checker on the fill and the type.

Filter: drop-shadow vs box-shadow?

We emit box-shadow. Transparent PNG silhouettes sometimes want filter: drop-shadow instead.

Is anything uploaded?

No.

Related tools