CSS Box Shadow Generator
Design multi-layer box shadows visually and copy production-ready CSS instantly.
What is it?
The CSS Box Shadow Generator is a free, browser-based visual editor for crafting the perfect `box-shadow` property. Instead of guessing offset values and blur radii by hand, you drag sliders and see the result live on a preview element. You can stack multiple shadow layers — something native CSS absolutely supports but most editors ignore — and toggle each layer between normal and inset mode. When you are happy with the result, one click copies the complete, minified CSS declaration ready to paste into your stylesheet.
How to use it
- The preview card in the center shows your shadow in real time. Start by adjusting the Horizontal and Vertical offset sliders to position the shadow.
- Increase the Blur slider for a soft diffuse shadow, or keep it low for a hard-edged look. The Spread slider expands or contracts the shadow beyond the element boundaries.
- Pick a shadow color using the color picker and set the opacity to blend it naturally with your background.
- Toggle "Inset" to flip the shadow inside the element, creating a pressed or recessed effect.
- Click "+ Add Layer" to stack additional shadows on top of the first. Each layer has its own settings. When done, click "Copy CSS" to grab the finished `box-shadow` value.
Why use this tool
Writing `box-shadow` CSS by hand is error-prone and slow. You end up copying from StackOverflow and tweaking blindly until it looks right. This tool gives you a live visual editor so you can design shadows with confidence — including advanced multi-layer compositions that would take ages to write manually. The exported code is clean, minimal, and copy-paste ready for any project.
Frequently asked questions
How many shadow layers can I add?
You can add up to 5 independent shadow layers. CSS natively supports multiple box-shadow values as a comma-separated list, which is exactly what this tool exports. Multi-layer shadows are great for creating depth, glow effects, and material-design-style elevations.
What does the "Inset" toggle do?
Inset shadows appear inside the element rather than outside. They are perfect for creating sunken, pressed, or engraved effects — for example, an input field that looks like it is recessed into the page.
Can I export the result as an image?
Yes. Click "Export PNG" to save a screenshot of the preview card with your shadow applied. This is handy for design mockups or sharing with colleagues who do not work with code.
Does this tool support text-shadow as well?
This tool focuses specifically on the CSS `box-shadow` property, which applies to block elements. For text shadows, we recommend looking at a dedicated text-shadow generator.
What units does the exported CSS use?
All values are exported in pixels (px), which is the most universally supported unit for box shadows. If you need relative units (em, rem) you can manually scale the exported values to match your font size.