Box Shadow Generator · Free CSS Shadow Tool 2026
Create beautiful CSS box shadows with real‑time preview. Adjust horizontal offset, vertical offset, blur, spread, color, and inset. Copy CSS code instantly. 100% free.
How it works: Adjust sliders for offset, blur, spread, color opacity, and inset. Watch the live preview and copy the CSS code.
🎯 Why Use a Box Shadow Generator?
Box shadows add depth and visual hierarchy to web elements. However, writing CSS box-shadow syntax manually can be tricky, especially with multiple values and inset option. Our interactive tool lets you adjust each parameter (horizontal offset, vertical offset, blur radius, spread radius, color, opacity, and inset) using sliders and color pickers, with instant visual feedback. The generated CSS code is ready to copy into your stylesheet. Perfect for UI designers, front-end developers, and anyone who wants to experiment with shadows without guessing numbers.
📘 How to Use
- Adjust X and Y offset to position the shadow.
- Increase blur for soft shadows or decrease for sharp edges.
- Use spread to grow or shrink the shadow.
- Pick a color and adjust opacity.
- Toggle inset for inner shadow.
- Copy the CSS code and paste into your project.
✨ Features
⚙️ How It Works
Each control updates the box-shadow property of the preview div via inline style. The CSS code is generated as `box-shadow: offsetX offsetY blur spread color;` with `inset` if checked. Opacity is applied to the color using rgba.
❓ FAQ
1. What is spread radius?
Spread expands the shadow size. Positive values enlarge, negative shrink.
2. Can I use multiple shadows?
This tool generates one shadow. For multiple, you can manually combine.