Box Shadow Generator
Stack up to four shadow layers, tune offset, blur, spread and opacity, and copy the result as a Tailwind class, a v4 theme token, or plain CSS.
Layers
Presets
Stack up to four layers. Layered shadows with low opacity and negative spread look more natural than one heavy shadow.
shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.1)]
@theme {
--shadow-custom: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
}box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
Frequently asked questions
How do I add a custom box shadow in Tailwind CSS?
Use an arbitrary value such as shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1)]. Spaces become underscores. For a reusable shadow, define it as --shadow-custom inside an @theme block and use the shadow-custom class.
How do I layer multiple shadows?
Separate each shadow with a comma inside the brackets, with no spaces after the commas. This tool formats that for you when you add more than one layer.
What does negative spread do?
A negative spread shrinks the shadow relative to the element. Paired with a vertical offset, it keeps the shadow tucked under the element instead of bleeding out at the sides, which is how Tailwind's own shadow-lg and shadow-xl are built.
Can I make an inner shadow?
Yes. Tick the Inset box for a layer. The generated class includes the inset keyword.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.