Box Shadow Generator
Create CSS box-shadow values with offset, blur, spread, colour and inset controls.
Natural-looking shadows
box-shadow adds depth to cards, buttons, dropdowns and modals, but guessing the right values is hard. With the Box Shadow Generator you adjust sliders and see the result instantly.
Settings
- Horizontal and vertical offset
- Blur and spread
- Shadow colour and opacity
- Inset shadow
Design tips
For soft, modern shadows use low opacity (10–20%), a large blur and a slight vertical offset. Shadows are less visible on dark themes; consider borders or light accents there.
How to use Box Shadow Generator
- Adjust the offset, blur and spread.
- Pick the shadow colour and opacity.
- Turn on inset if needed.
- Copy the box-shadow code.
Why use this tool?
Create professional-looking shadows without wasting time on trial and error.
FAQ
What does spread do?
Spread grows (positive) or shrinks (negative) the shadow before it's blurred.
Can I use multiple shadows?
In CSS you can layer shadows separated by commas; combine generated values for more realistic shadows.
Does box-shadow hurt performance?
Many shadows with large blur, especially in animations, can affect performance; use them sparingly.
Related tools
Border Radius Generator
Design rounded corners visually; set all four corners together or individually.
Open toolCSS Gradient Generator
Design linear and radial CSS gradients with multiple colour stops and a live preview.
Open toolColor Code Converter
Convert colours between HEX, RGB and HSL with a live preview; alpha is supported.
Open toolCSS Minifier
Shrink your CSS files by removing comments and unnecessary whitespace.
Open tool