Tailwind Shadow Generator
Every shadow-* class with the CSS behind it. Colour it, or build your own and add it to the theme.
shadow-lg
/* what that renders as */
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);The class names moved in v4; the CSS did not
Tailwind ships a good shadow scale and then makes you read the source to find out what each
step actually is. This shows the real box-shadow behind every class in both v3
and v4, lets you colour it from the palette with the opacity modifier the docs gloss over, and
writes the theme entry for anything custom — the part most people end up hand-typing into
tailwind.config.js or an @theme block.
How to use it
-
Choose the version
v4 and v3 have different class names for the same shadows. The toggle keeps the CSS constant across the switch so the rename is visible instead of surprising.
-
Pick from the scale
Each entry shows a live chip and the exact box-shadow that class emits, from shadow-2xs through shadow-2xl and the inset family.
-
Colour it
Choose a palette hue, a shade and an opacity modifier. The output is the shadow-{colour}/{opacity} utility and the CSS it resolves to.
-
Or build a custom one
Stack up to four layers. You get the arbitrary-value class for a one-off, plus the @theme block (v4) or config entry (v3) that makes it a named utility.
-
Copy the classes
Classes, CSS or the theme snippet. Check it against your real surface colour first — the picker in the corner of the preview changes the background.
The v4 rename, in one table
In v4 the scale gained a step at the bottom, and the existing names slid down to make room.
What v3 called shadow is shadow-sm in v4; v3's
shadow-sm became shadow-xs; shadow-inner became
inset-shadow-sm, part of a new inset family that can be combined with a drop
shadow on the same element. The upgrade tool renames these, but a component library or a
copied snippet will not have been through it, and the result is every card on the page
rendering one step lighter than it was designed.
Coloured shadows drop the layer alpha
The scale values are two layers of black at 10% each. Add shadow-blue-500 and
Tailwind swaps every layer's colour for the blue — at 100%, because the layer's own alpha was
part of the colour it just replaced. That is why a coloured shadow with no modifier looks
like a solid smear. shadow-blue-500/30 is almost always what was meant, and the
generator defaults to a modifier for that reason.
Arbitrary value or theme entry
shadow-[0_8px_24px_-4px_rgb(0_0_0/0.2)] is fine once. The second time it
appears, put it in the theme: @theme { --shadow-card: … } in v4, or
theme.extend.boxShadow.card in v3, and use shadow-card. The theme
version also gets a proper name in the IDE's class completion, which the arbitrary one never
will.
Working in plain CSS instead
If the target is a stylesheet rather than a utility class, the
CSS box shadow generator has the same layer controls
with up to six layers and no Tailwind vocabulary in the way. And for turning an existing
box-shadow declaration into a class, the
CSS to Tailwind converter handles it along with everything
else in the rule.
Frequently asked questions
How do I add a shadow in Tailwind CSS?
shadow-sm, shadow-md, shadow-lg, shadow-xl or shadow-2xl. Each one is a real multi-layer box-shadow — the generator above shows the exact CSS behind every class so you know what you are getting before you commit to it.What is the difference between shadow-sm in Tailwind v3 and v4?
shadow is now shadow-sm, and v3's shadow-sm is now shadow-xs. A v4 project that keeps its v3 class names will render every shadow one size smaller. The version toggle here shows both sets side by side so the rename is visible rather than something you discover in a diff.How do I change the shadow colour in Tailwind?
shadow-{colour} utility alongside the size, for example shadow-lg shadow-blue-500/50. The size utility sets a --tw-shadow-color variable and the colour utility overrides it; the /50 is the opacity. Coloured shadows look best at low opacity because the shadow is layered over whatever is behind it.How do I make a custom shadow in Tailwind?
shadow-[0_8px_24px_-4px_rgb(0_0_0/0.2)], with underscores in place of spaces. For a shadow you will reuse, add it to the theme instead — @theme { --shadow-card: … } in v4, or theme.extend.boxShadow in v3 — and it becomes a normal shadow-card utility. The custom tab here writes both.How do I make an inset shadow in Tailwind?
inset-shadow-sm or inset-shadow-xs; they are a separate family so an inset shadow and a drop shadow can be combined on one element. In v3 the single option is shadow-inner. Anything else — a deeper or coloured inset — needs an arbitrary value with inset at the front.Why is my Tailwind shadow not showing?
overflow: hidden and clips it. Give the parent some padding or change the surface colour behind the preview here to check. The other cause is a class that does not exist in your version — shadow-2xs and the inset-shadow-* utilities are v4 only.