Box Shadow Generator
The Box Shadow Generator builds a CSS box-shadow with sliders for X and Y offset, blur, spread, color, opacity and inset, plus Material Design and Tailwind presets, and outputs the exact CSS.
About this tool
The Box Shadow Generator builds a CSS box-shadow with sliders for X and Y offset, blur, spread, color, opacity and inset, plus Material Design and Tailwind presets, and outputs the exact CSS.
How to use it
- Start from a preset or keep Custom.
- Adjust X/Y offset, blur, spread and opacity.
- Pick the shadow color and tick Inset for an inner shadow.
- Click Copy CSS to paste the box-shadow rule.
Good to know
- box-shadow syntax is: [inset] offset-x offset-y blur-radius spread-radius color.
- A larger blur radius softens the edge; spread makes the shadow grow or shrink before blurring.
- Low-opacity, dark shadows (roughly 10–25%) look more natural than solid black.
- Multiple shadows can be layered by separating them with commas.
- The inset keyword draws the shadow inside the element’s border.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I add a shadow to a div in CSS?
Use the box-shadow property, for example box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); this tool writes the value for you.
What is the difference between blur and spread?
Blur controls how soft the shadow edge is. Spread expands or contracts the shadow’s size before the blur is applied.
How do I make an inner shadow?
Add the inset keyword at the start of the value, or tick Inset in the tool.
Can I use multiple box shadows?
Yes. Separate shadows with commas; layered shadows, like Material and Tailwind presets, look more realistic.