All Tools
CSS Box Shadow Generator
Design box-shadow CSS with live preview. Offset, blur, spread, inset.
Preview
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
Looking for gradients or glassmorphism? Try our dedicated tools: CSS Gradient Generator · Glassmorphism Builder
How it works
- Adjust the offset, blur, spread, color and opacity sliders.
- Watch the live preview update as you tune each value.
- Toggle inset for inner shadows.
- Copy the generated box-shadow CSS.
What people use it for
- Dialing in a box-shadow without guessing values.
- Matching a design mockup's elevation/depth exactly.
- Building soft, layered shadows for cards and buttons.
Good to know
- It generates box-shadow only — for gradients or glassmorphism, use the dedicated CSS Gradient Generator and Glassmorphism Card Builder tools.
- The preview shows one element — test in your actual layout for stacking and background interactions.
Frequently asked questions
Which effects can I generate?
Box-shadow (outer and inset) with a live preview so you tune by eye, not by trial and error. Gradients and glassmorphism have their own dedicated tools on Sticraft.
Can I make an inner shadow?
Yes — enable the inset option and the shadow renders inside the element instead of behind it.
Is anything uploaded?
No. CSS is generated live in your browser.