CSS Box Shadow Generator
Design a box-shadow visually and grab the CSS.
About CSS Box Shadow Generator
CSS Box Shadow Generator designs a single CSS box-shadow visually and returns the ready-to-paste declaration. Sliders set horizontal and vertical offset, blur radius, spread radius, color, opacity, and the inset flag; a live preview over a sample surface updates as you tune.
Worked example: leave the defaults — offset 0 / 8 px, blur 24 px, spread −4 px, black at 40% opacity — and you get a soft, slightly recessed elevation suitable for a card. Drop the blur and lower the opacity for a sharper, tighter shadow; flip on inset for a sunken/pressed look. Copy the resulting box-shadow value with one click.
Two things are worth knowing. Blur and spread are independent — blur fades the shadow's edge softly, while spread enlarges the shadow before the blur is applied. Inset shadows live inside the element (perfect for sunken or pressed states); without inset they sit outside it. The CSS box-shadow property does support multiple stacked shadows (comma-separated), which is how design systems like Tailwind build multi-layer elevation — this tool generates one layer; combine the outputs of two passes by hand if you want a layered effect.
All design happens in your browser. The CSS is generated locally and nothing about your design is uploaded.