CSS Box Shadow Generator with Live Preview
Free CSS box-shadow generator. Adjust offset, blur, spread, colour and opacity with a live preview and copy the CSS code.
Runs in your browser — your data is never uploaded.
Craft soft, modern shadows without guessing. Adjust the horizontal and vertical offset, blur, spread, colour and opacity, switch to an inset shadow if you like, and see the result live. Copy the finished CSS box-shadow rule.
How to use the CSS Box Shadow Generator
- Adjust offset, blur and spread.
- Pick a colour and opacity.
- Copy the CSS.
CSS Box Shadow Generator — frequently asked questions
What is box-shadow spread?
Spread expands or shrinks the shadow before blurring it.
How do I make a soft shadow?
Use a larger blur, a low opacity and a small vertical offset.
What does inset do?
It draws the shadow inside the element instead of outside.
Related free tools
CSS Gradient Generator
Free CSS gradient generator. Design linear and radial gradients with multiple colour stops,…
Color Converter
Free colour converter. Convert between HEX, RGB, HSL and CMYK with a colour picker and live…
Lorem Ipsum Generator
Free Lorem Ipsum generator. Create placeholder text by paragraphs, sentences or words for mo…
Have an idea? Let’s build it.
Tell us what you need — we’ll reply with a clear, written quote. No pressure, no jargon.