Shape the perfect shadow for cards, buttons and images. Move the sliders for offset, blur, spread and opacity, switch to an inner shadow, and copy the CSS with matching rounded corners.
loading toolHow to make a box shadow
- Fill in the boxes or move the sliders.
- Watch the live preview change.
- Copy the finished code into your site.
Good to know
- Shadows look most natural when the light seems to come from above: keep the vertical offset positive.
- On dark backgrounds, try the Glow preset with a light colour.
Questions
What do blur and spread do?
Blur softens the edge: 0 gives a sharp shadow. Spread grows (positive) or shrinks (negative) the shadow before blurring; a negative spread keeps it tucked under the box.
How do I make a modern soft shadow?
Use a small vertical offset, a big blur, a negative spread and low opacity, for example 0 10px 30px -5px rgba(0,0,0,.25). That is the “Soft” preset.
Is my data private?
Yes. Everything happens inside your own browser: nothing you type or choose is uploaded to us or anyone else.
Is it free?
Completely free, with no sign-up, no watermark and no limit on how many times you use it. Light ads keep the site running.
