Box shadow generation
Generate CSS box-shadow rules by adjusting the offset, blur, spread, and color visually.
The preview matches the exact CSS output. Match the preview background and box colors to your website’s palette to test the shadow’s contrast before copying the rule.
Blur and spread
The blur radius determines how soft the shadow edges become. A value of 0 leaves a solid, hard edge, which is useful for retro or brutalist web designs.
The spread radius expands or shrinks the base size of the shadow before it blurs. A negative spread radius makes the shadow smaller than the element, preventing it from leaking out of the top or sides when applying a bottom-heavy offset.
Inset vs drop shadows
Standard drop shadows render behind the element. Toggling the Inset shadow option moves the shadow inside the box, painting it over the element’s background but beneath its content. Use inset shadows to simulate depth, pressed buttons, or debossed forms.