Give it some lift.
Dial in offset, blur, spread, and color. The card previews it live, and you take the box-shadow.
Shadow CSS is generated in the browser. Nothing is uploaded.
What it does
About the Shadow Generator.
A box-shadow generator lets you set offset, blur, spread, and color on a live preview, then copy a CSS box-shadow value.
Elevation should be a system, not a one-off. Soft, slightly downward shadows read as cards on light UI. Keep opacity low on dense Fintech screens so charts stay the focus.
How to use
Three steps.
Set
Adjust x and y offset, blur, spread, and shadow color.
Read
Watch the preview card so the elevation matches the mockup.
Copy
Copy the box-shadow declaration into CSS or a token.
When to use it
Where it helps.
Use it for cards, popovers, and sticky bars. Prefer a small set of elevation steps (for example rest, hover, modal) instead of a unique shadow per component.
FAQ
FAQ.
What does blur versus spread do?
Blur softens the edge. Spread grows or shrinks the shadow before blur is applied. Positive spread makes a larger silhouette; negative spread tightens it.
How do I copy the CSS?
Copy the box-shadow value and paste it onto the selector or into a token such as --shadow-md.
Can I use this for drop shadows on text?
This tool targets box-shadow on elements. Text usually uses text-shadow, which is a related but separate property.
Does generation happen locally?
Yes. The preview and the CSS string stay in your browser. Nothing is uploaded.
More tools
style
Border Radius Generator
Link or unlock corners, add Figma-style smoothing, and copy border-radius CSS.
style
Gradient Generator
Compose linear or radial CSS gradients with color stops and angle.
color
Contrast Checker
Check WCAG 2 contrast between text and background.