CSS Box Shadow Generator
Visually build CSS box-shadows
100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.
Shadow Settings
box-shadow: 4px 8px 24px 0px rgba(0, 0, 0, 0.25);About this tool
Visually design a CSS box-shadow - adjusting offset, blur, spread, color, and opacity with live preview - and generates the exact CSS syntax to copy, rather than manually guessing values for the notoriously fiddly box-shadow property.
How to use this tool
- Select base shadow styleStart with outer or inset shadow based on the component type.
- Tune offset and blurAdjust X/Y offset and blur radius until depth looks natural.
- Set spread and opacityControl edge softness and intensity for subtle or strong elevation.
- Copy CSS declarationUse generated `box-shadow` value directly in your stylesheet.
How the box-shadow values work
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15) means no horizontal offset, 4px down, 12px of blur, no spread and a black shadow at 15% opacity. Add inset at the start to put the shadow inside the element.
Soft, realistic shadows usually combine two layers separated by a comma: a small, darker one close to the element and a larger, lighter one further away.
Key features
- Creates precise shadows faster than manual trial-and-error coding.
- Live preview makes depth tuning intuitive.
- Helps standardize elevation styles across components.
- Outputs clean copy-ready CSS values.
Common uses
- Designing card elevation and modal depth effects.
- Building consistent hover states for interactive elements.
- Matching product UI shadows to design specs.
- Creating neumorphic or soft-layered visual styles.
Tips for better results
- Use lower opacity with slightly higher blur for realistic depth.
- Stack two subtle shadows for cleaner modern UI elevation.
- Match shadow direction to your overall light source assumption.
- Check dark-mode shadow appearance separately from light mode.
Mistakes to avoid
- Using harsh black shadows that make UI look outdated.
- Applying identical shadows to every component regardless of hierarchy.
- Overusing spread values that create muddy boundaries.
- Skipping dark-theme tuning where shadows can disappear or look dirty.
Frequently asked questions
If the tool supports multiple shadow layers, you can stack several shadows together for more complex depth effects, which is valid CSS box-shadow syntax (comma-separated shadow values).
Yes, typically - toggle between a standard drop shadow and an inset shadow that appears inside the element's border instead of outside it.
box-shadow is well-supported across all modern browsers without needing vendor prefixes, so the generated CSS should work consistently.
Use two or three layered shadows with increasing blur and decreasing opacity, and a slight downward offset, rather than one large dark shadow. Low-opacity black or a dark shade of the background colour looks more natural than pure grey.
box-shadow follows the element's rectangular box (and its border-radius); filter: drop-shadow() follows the visible shape, including transparent PNG and SVG outlines. Use drop-shadow for icons and cut-out images.
Static shadows are cheap. Animating large blurred shadows on many elements can cause jank; animate opacity of a pseudo-element that holds the shadow instead.