Free css tool
CSS Box Shadow Generator
Design the perfect box-shadow with a live preview. Set offset, blur, spread, color and inset, then copy the CSS line straight into your stylesheet.
Free · No sign-up · Runs in your browser
Features
- Live preview
- Offset, blur, spread and color
- Inset shadows
- Copy CSS
How to use the CSS Box Shadow Generator
- Move the sliders until the preview looks right.
- Toggle inset if you need an inner shadow.
- Copy the CSS.
Frequently asked questions
What does spread do?
Spread grows or shrinks the shadow before it is blurred. Negative spread makes a tighter, more subtle shadow.
More free tools
Glassmorphism & Neumorphism Generator
Design frosted-glass (glassmorphism) and soft-UI (neumorphism) effects visually and copy the CSS. Adjust blur, opacity, border, radius and shadow.
CSS Mesh Gradient Generator
Create smooth mesh gradients with color harmony rules and presets (Sunset, Ocean, Aurora…). Copy pure CSS – no images needed.
CSS Border Radius Generator
Set each corner radius visually and copy the CSS border-radius code. Free online rounded-corner generator.
Free QR Code Generator
Create free QR codes for links, text, email, SMS, WiFi, vCard and WhatsApp. Pick colors and size, then download PNG or SVG. No sign-up, no expiry.
CMYK Color Separation
Split any JPG or PNG into Cyan, Magenta, Yellow and Black (Key) plates for offset and screen printing. Free online CMYK separation, runs in your browser.
Color Palette Generator
Generate beautiful random color palettes for your designs. Copy HEX codes in one click. Free online color scheme generator for designers.