What is it?
The Box Shadow Generator designs CSS shadows for cards, buttons and images, with a live preview.
Who is it for?
Web designers and developers styling cards, buttons and images, and Blogger owners customising their theme.
How to use it
- Start from Presets (soft, hard, floating, inner or glow).
- Adjust the horizontal and vertical offset, blur, spread, Colour and Opacity.
- Tap Copy CSS.
What each setting does
- Offset: moves the shadow; positive Y puts it below, as if light comes from above.
- Blur: softens the edge. Spread: grows or shrinks the shadow.
- Inset: puts the shadow inside the box, for pressed buttons and input fields.
Design tips
- Subtle shadows look more modern: low opacity (10–25%) and a larger blur.
- Use a darker tint of the background colour instead of pure black for softer, more natural shadows.
- In dark mode, shadows barely show; use a lighter border or a slightly lighter card colour instead.
Paste the CSS into your stylesheet, for example .card { box-shadow: …; }.
Worked examples
- Soft card:
box-shadow: 0 4px 16px rgba(0,0,0,.12); - Floating button:
0 10px 25px rgba(0,0,0,.2), plus a slightly smaller shadow on hover so it seems to press down. - Focus ring:
0 0 0 3px rgba(91,69,240,.4)(zero blur, 3px spread) gives a clear outline for keyboard users.
Several shadows at once
Separate them with commas: a tight dark shadow plus a wide soft one looks more realistic than one shadow. For example 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.1).
Common mistakes
- Shadow cut off at the edge: a parent with
overflow: hiddenclips it. Add padding to the parent. - Shadows on round images: add
border-radiusto the same element so the shadow follows the curve. - Heavy shadows on many items can slow scrolling on old phones; keep blur moderate.
Open the tool: Box Shadow Generator
Still stuck?
Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.
Questions, or an error not listed here?
Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.