Dev Tools
Box Shadow Generator
Adjust offset, blur, spread, color and inset — get ready CSS code.
Esc Clear
Shadow
Preview
CSS Code
What does Box Shadow Generator?
Generate CSS box-shadow properties visually and copy the code.
How to use Box Shadow Generator?
- Adjust shadow offset, blur, spread, and color using the controls.
- Preview the shadow on a live element.
- Copy the generated CSS code.
Key features
- Visual editor with real-time shadow preview.
- Supports inset and multiple shadows.
- Generates clean, ready-to-use CSS code.
Frequently asked questions
Can I add multiple shadows?
Yes, you can stack multiple box-shadows by separating them with commas in the CSS.
What is the spread radius?
The spread radius controls how much the shadow expands beyond the blur; a positive value makes it larger, negative makes it smaller.
Is this tool free?
Yes, this tool is completely free and requires no registration.
Is my data saved?
No. All calculations happen in your browser only — no data is sent to any server.