Box Shadow Generator
Tune offset, blur, spread, colour and alpha for any number of shadow layers with a live preview on a card, button, input or text in light and dark at the same time. Start from Tailwind or Material elevation presets, import an existing box-shadow, text-shadow or filter value, reorder layers by drag or keyboard, switch between px, rem and em, and copy the result as CSS or a Tailwind arbitrary class.
Drag to reorder · Alt+↑/↓ moves the focused row · Delete removes · ⌘D duplicates
box-shadow: 0 4px 12px -2px rgba(17, 24, 39, 0.1);
Related tools
CSS Gradient Generator
Design linear, radial and conic gradients with draggable stops, layers and Tailwind, CSS or SVG output.
Color Converter
Convert any CSS colour between HEX, RGB, HSL, HWB, LAB, LCH, OKLCH and P3, with contrast checks and ramps.
Color Palette Generator
Build accessible palettes from a seed colour or an image, with Tailwind and token exports.
HEX to RGB
Convert HEX colour codes to RGB and back with sliders, a picker and Tailwind snippets.
How to use Box Shadow Generator
- 1Pick box-shadow, text-shadow or drop-shadow() and a preset, or import your own value.
- 2Adjust each layer with the sliders, colour and alpha pickers; add, duplicate and reorder layers.
- 3Compare the light and dark previews on the element type you are styling.
- 4Copy the CSS or the Tailwind class.
About Box Shadow Generator
Tune offset, blur, spread, colour and alpha for any number of shadow layers with a live preview on a card, button, input or text in light and dark at the same time. Start from Tailwind or Material elevation presets, import an existing box-shadow, text-shadow or filter value, reorder layers by drag or keyboard, switch between px, rem and em, and copy the result as CSS or a Tailwind arbitrary class.
Box Shadow Generator is part of FizzKit — a collection of focused developer and ad-tech tools. Because everything runs locally, it works offline once loaded and never exposes your data to a remote server.