Developer tools
CSS box-shadow generator
Dial in offset, blur, spread, color, and inset with the sliders and watch the box update live, then copy the ready-to-paste CSS. Everything runs in your browser - nothing is uploaded.
How it works
Dial in a CSS box-shadow with sliders and a color picker, and watch a live preview update as you go. A box-shadow is built from a few numbers: the horizontal and vertical offset that move the shadow, the blur radius that softens it, the spread that grows or shrinks it, and a color (usually with some transparency). Getting a natural-looking shadow by editing those values blind is fiddly, so this tool lets you see the result immediately and read off the exact CSS.
An inset toggle switches the shadow to the inside of the element for a pressed or recessed look. When it looks right, copy the generated box-shadow declaration straight into your stylesheet. Everything runs in your browser, with nothing uploaded.
Example. Set the horizontal offset to 0, vertical to 8, blur to 24, spread to -4, and a semi-transparent black, and you get a soft drop shadow that reads as box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.25). Flip on inset and the same values render as an inner shadow instead.
FAQ
What do the box-shadow values mean?
In order, a box-shadow is: horizontal offset (positive moves it right), vertical offset (positive moves it down), blur radius (larger is softer), spread radius (positive grows the shadow, negative shrinks it), and the color. The optional inset keyword draws the shadow inside the element instead of outside. This tool exposes each as a control and assembles them into the final declaration.
What does the inset option do?
By default a box-shadow is drawn outside the element, like a drop shadow lifting it off the page. The inset keyword flips it inside the border, so the element looks recessed or pressed in, which is useful for inputs, wells, and toggled buttons. The preview shows the difference immediately as you switch it.
Why do good shadows use a transparent color?
Real shadows are not solid black; they let some background through. Using a color with an alpha below 1, such as rgba(0, 0, 0, 0.2), makes the shadow blend with whatever is behind the element and look far more natural than opaque black. The color control here includes an opacity setting for exactly that reason.
Is anything uploaded?
No. The preview and the generated CSS are produced entirely in your browser. Nothing you adjust is sent to a server, logged, or stored, and the tool works offline once the page has loaded.