Skip to content
TextArray1.41.0
100% local

CSS box-shadow generator

Build a CSS box-shadow value from offset, blur, spread and color, with multiple layers and presets.

15
Output
Related tools
CSS gradient generatorDeveloper tools
CSS formatterDeveloper tools
Color converterDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS box-shadow generator
Adjust horizontal and vertical offset, blur radius, spread radius and color, and this tool assembles the matching box-shadow declaration as you go. It is built for the everyday case — a card, a button, a modal that needs to lift off the page — as well as for layered shadows made of several shadows stacked together, the technique behind the soft, realistic depth used in most modern design systems.
The preset dropdown offers subtle, medium and strong elevation, each with its own layer count, offset and blur already tuned; pick custom to drive every value yourself. The layers option controls how many shadows stack: each added layer grows the offset and blur by its index and fades its opacity, turning a single flat shadow into a soft, convincing one. Inset flips the shadow inward for pressed elements, opacity controls how strong the color reads, and the unit switch outputs px or rem. Turn on the dark mode variant for a second, stronger declaration wrapped in an @media (prefers-color-scheme: dark) block — a shadow needs more opacity to stay visible on a dark background. Choose whether the result comes out as a single line, a --box-shadow custom property, or a .box-shadow class, and add a matching filter: drop-shadow line for elements a box-shadow can't reach, such as an SVG icon or a transparent PNG.
Every value is clamped to a sane range, and an unrecognized color falls back to black rather than broken CSS, so the output always pastes cleanly into a stylesheet.
Everything runs in your browser as you adjust the controls — no color or generated CSS is ever sent anywhere. Copy the result, download it as a .txt file, or send it into another tool to keep working on it.
FAQ
What does the layers option actually change?
Each additional layer grows the offset and blur relative to the first layer and lowers its opacity, stacking several shadows into one soft, realistic result instead of a single flat outline.
How is the dark mode variant different from the light one?
It keeps the same offsets and color but raises the opacity, since a shadow at the same strength tends to disappear against a dark background. It is wrapped in an @media (prefers-color-scheme: dark) block so it only applies there.
When should I use the filter: drop-shadow output instead of box-shadow?
box-shadow only shadows an element’s rectangular box. For an SVG icon or a PNG with transparency, filter: drop-shadow follows the actual shape, so turn on the filter option to get both declarations.
What happens if I type an invalid color?
The generator falls back to black rather than producing invalid CSS, so the output always stays usable while you fix the color value.
Is any of this sent to a server?
No. The generator runs entirely in your browser — your colors and settings never leave your device.