For developers · online · free
CSS shadow
Move the sliders: see the shadow, copy the CSS.
What the tool does
Builds the CSS box-shadow property with a live preview: offset, blur, spread, colour and opacity.
How to use it
- Move the sliders.
- Pick the colour of the shadow.
- Copy the CSS.
Good to know
- Turn on "Inside" for an inset shadow.
- Low opacity and a big blur look the most natural.
Frequently asked questions
- Can I use several shadows?
- Copy the lines and join them with a comma in one box-shadow.
- Does it work in every browser?
- Yes, box-shadow is supported everywhere.