Box Shadow Generator
Free CSS box-shadow generator with a live preview. Set offset, blur, spread and colour, then copy the rule. Built entirely in your browser.
Tool names, instructions and generated content may be provided in English.
box-shadow: 0px 18px 40px -8px #00000080;
About this tool
Tune a card lift or inset well for a landing page without guessing pixel values. Offset, blur, spread and colour update the preview immediately.
Copy the box-shadow declaration into your CSS. Inset mode is available for inner shadows.
How to use it
- Move the offset, blur and spread sliders.
- Pick a colour and optionally enable inset.
- Copy the box-shadow CSS.
FAQs
Can I stack multiple shadows?
This builder outputs one shadow. Add a comma and a second shadow in your stylesheet if you need a layered look.
What units does it use?
Pixels for offset, blur and spread, plus a hex colour.
Do you save my shadow settings?
No. Copy the CSS if you want to keep it.