CSS Box Shadow Generator
Design box shadows visually and copy the CSS · free, no signup
Free CSS Box Shadow Generator — Make Perfect Shadows Visually
The CSS box-shadow property adds depth to cards, buttons, modals and images. It takes horizontal and vertical offsets, a blur radius, a spread radius, a colour and an optional inset keyword. Getting the values right by trial and error is slow; this generator lets you drag sliders and see the result immediately.
Adjust every value, choose the shadow colour and opacity, switch to an inset shadow, and use presets such as soft, hard, layered and neumorphic. Then copy the finished CSS — including the -webkit- prefix line if you want it — and paste it into your stylesheet.
Key features
Live preview
See the shadow on a card as you move the sliders.
All properties
Offsets, blur, spread, colour, opacity and inset.
Style presets
Soft, hard, layered and neumorphic looks.
Copy-ready CSS
One click copies the declaration.
How to use it
- Move the sliders for offset, blur and spread.
- Pick a colour and opacity.
- Toggle inset if you need an inner shadow.
- Copy the CSS.
Worked example
Example
box-shadow: 0px 10px 25px 0px rgba(15, 23, 42, 0.25);
Who uses this tool
UI designers
Add realistic depth to components.
Front-end developers
Generate shadow values without guessing.
Beginners
Learn how each value changes the look.
Tips for the best results
- Softer, larger blurs with low opacity look most natural.
- Use a slightly tinted shadow colour instead of pure black.
- Layer two shadows for realistic depth.
- Keep shadows consistent across a design.
Common mistakes to avoid
- Using very dark, tight shadows that look harsh.
- Forgetting that large blurs can hurt performance on huge elements.
- Applying shadows to elements with overflow hidden parents that clip them.
Why use AZRS QuickFix?
It is 100% free, needs no signup and has no watermark or usage limits. The tool runs in your browser, so what you type stays on your device, and it works on phones, tablets and desktops. New tools are added every week — bookmark this page or browse the full QuickFix toolbox.
Frequently asked questions
What do the box-shadow values mean?
Horizontal offset, vertical offset, blur radius, spread radius, colour and optional inset.
What is an inset shadow?
A shadow drawn inside the element instead of outside.
Can I add multiple shadows?
Yes, separate them with commas; the tool generates layered presets.
Does box-shadow affect layout?
No, it does not take up space.
Is it supported everywhere?
Yes, in all modern browsers.
Is it free?
Yes.