FREE TOOL
Box shadow generator
Free to use.
Layer shadows with a live preview, then copy the CSS or the Tailwind class.
Layer 1
CSS
box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12);Tailwind
shadow-[0_8px_24px_-4px_rgba(15,23,42,0.12)]How to use the
Box shadow generator
Each step below matches what you see in the tool above.
Pick a starting point
Choose a preset or keep the default soft shadow. Every value stays editable.
Tune each layer
Select a layer and set its offset, blur, spread, color and opacity. Stack up to six layers for depth that reads as natural light.
Copy and share
Copy the CSS or the Tailwind class. The page URL holds your shadow, so the link brings it back exactly.
What people ask
before they use it
Short answers on how it works and what happens to your data.
No. The generator runs in your browser. Your settings only live in the page URL, so the link you copy carries them.
Shadow ready for the build?
Check it on the live page.
Free plan, no credit card. Reviewers never sign up.