CSS box-shadow Generator
Craft shadows visually by dragging offset, blur, spread, and color, layering multiple shadows, and toggling inset mode. The generator writes clean CSS that matches your design precisely.
How to use the CSS Box Shadow Generator
- Set the horizontal and vertical offsets with the sliders.
- Adjust blur radius and spread to control softness and reach.
- Pick a shadow color, often a translucent black for realism.
- Copy the generated box-shadow value into your stylesheet.
When the CSS Box Shadow Generator is useful
- Giving cards and modals the soft elevation shadows of modern UI.
- Creating inset shadows for pressed buttons and input wells.
- Layering multiple shadows for sophisticated depth effects.
- Converting a design tool's shadow spec into production CSS quickly.
How the CSS Box Shadow Generator works
A box-shadow is defined by offset-x, offset-y, blur radius, spread radius, and color; larger blur with smaller offset reads as soft ambient elevation, while tight offsets suggest a harder light source. The generator supports layering several shadows, since combining a tight dark shadow with a wide soft one is the classic two-layer recipe for realistic depth. Everything renders as live CSS in your browser.
Limits to keep in mind
Heavy multi-layer shadows can affect rendering performance on low-end devices when applied to many elements simultaneously.
Frequently asked questions
Why does my shadow look harsh?
Increase the blur radius and reduce the offset; real-world shadows are usually soft and close to the element.
Should the shadow color be pure black?
Usually not; semi-transparent black or a tinted dark tone blends more naturally with colored backgrounds.
What does inset do?
It draws the shadow inside the element, useful for pressed states and wells.
Last reviewed: October 2026.