CSS Box Shadow Generator
Design layered shadows with live preview and code
Preview
Element
Shadow stack (2)
Shadow 1
Shadow 2
Presets
CSS
box-shadow: 0px 10px 30px -10px rgba(10, 10, 10, 0.15),
0px 2px 8px -2px rgba(10, 10, 10, 0.08);Tailwind (arbitrary value)
shadow-[0px_10px_30px_-10px_rgba(10,_10,_10,_0.15),_0px_2px_8px_-2px_rgba(10,_10,_10,_0.08)]
Quick steps
Tweak the shadow
Adjust X, Y, blur, spread, color, and opacity. Toggle inset for inner shadows.
Stack multiple shadows
Add up to six shadow layers. Realistic depth usually comes from stacking 2 to 3 shadows with different blurs.
Copy CSS or Tailwind
Grab the standard CSS or the Tailwind arbitrary-value class, ready to paste into your project.
Frequently asked questions
Can I use multiple shadows in one CSS box-shadow?
Yes. The CSS box-shadow property accepts a comma-separated list of shadows. They render bottom-to-top in source order.
What is the difference between blur and spread?
Blur softens the edge of the shadow. Spread grows or shrinks the shadow's overall size before blurring. Negative spread is useful for the classic 'lift' effect.
What does inset do?
Inset draws the shadow inside the element instead of around it. Useful for pressed buttons, inputs, and inner glows.
Why does my Tailwind class look so long?
Tailwind arbitrary values must be a single token, so spaces become underscores. The class works exactly like normal CSS.