💨

CSS Box Shadow Generator

Generate CSS box shadows visually. Adjust X/Y offset, blur, spread, color, and opacity with live preview.

Preview

X: 5px

Y: 5px

Blur: 15px

Spread: 0px

Opacity: 20%

Color

Inset

Click to copy

box-shadow: 5px 5px 15px 0px rgba(26,26,46,0.2);

Frequently Asked Questions

Can I create inset shadows?

Yes, toggle the Inset checkbox to create inner shadows instead of outer shadows.

Related Tools

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, and CMYK formats. Pick colors with a visual color picker and get values in all formats instantly.

CSS Formatter & Minifier

Beautify or minify CSS code instantly. Clean up messy stylesheets or compress them for production.

CSS Gradient Generator

Create beautiful CSS gradients visually. Pick colors, adjust angle, and copy the CSS code instantly.