CSS Box Shadow Generator
Generate single-layer CSS box-shadow values with offsets, blur, spread, color, inset, and preview.
Build a single CSS box-shadow value, preview it locally, and copy either the full declaration or just the shadow value. The color field accepts a color value only, not a full CSS declaration. Values stay in your browser.
Use a CSS color value such as #0f172a, rgba(...), oklch(...), currentColor, or var(--shadow-color). Do not paste a full CSS declaration.
How it works
Horizontal offset and vertical offset move the shadow right/left and down/up. Negative values are valid for offsets and spread.
Blur radius softens the edge and cannot be negative. Spread radius grows or shrinks the shadow before blur is applied.
Shadow color accepts one CSS color value. It can be a named color, hex value, functional color, currentColor, or a custom property value such as var(--shadow-color). Extra CSS declarations are rejected so copied output stays focused on one box-shadow value.
Inset shadow switches the shadow from outside the box to inside the box using the CSS keyword. Unit changes numeric measurements between px and rem. Output controls whether copied text includes box-shadow: and a semicolon.
The preview applies the generated value to a sample box. Review generated CSS in your target layout because backgrounds, borders, overflow, and stacking context can change the final effect.
Values stay in the browser. Do not paste sensitive design tokens into any web tool unless you trust the device and page context you are using.
