Skip to content
tailwindtool

Tailwind Shadow Generator

Two ways to work: start from Tailwind's built-in shadow scale and tint it with a palette color, or stack your own layers when the built-ins aren't soft enough. You get the class, the plain CSS, and a ready-to-paste theme snippet so a shadow you like can become shadow-card instead of a 40-character arbitrary value repeated in nine components. Output defaults to v4, and the toggle remaps the scale rather than jumping sizes — v3 shadow is v4 shadow-sm.

Preview

Card

Output

Tailwind classes 
shadow-lg
HTML 
<div class="shadow-lg rounded-2xl bg-white p-6">
  Card content
</div>
Plain CSS 
.card {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -4px rgb(0 0 0 / 0.1);
}

Controls

Tailwind version
Mode
Built-in shadow
Presets

Presets drop you into layer mode, since that's where the interesting shadows live.

How I actually use this

For product UI I stay on the scale. shadow-sm for inputs, shadow-md for cards that can be picked up, shadow-lg for dropdowns and popovers, shadow-xl for modals. Four steps covers basically everything, and using the same four everywhere is what makes an interface feel like one product instead of nine.

Layer mode is for the cases the scale can't reach. The trick that makes a shadow read as real light is stacking several low-opacity layers whose blur roughly doubles each time — that's the Smooth 5x preset. One layer at 15% opacity looks like a sticker; five layers at 6% looks like an object sitting on a surface. Physically it approximates a soft area light instead of a single point, which is why your eye buys it.

Two things worth remembering. First, tint your shadows: pure black shadows go muddy on colored backgrounds, so I reach for slate-900 or slate-950 instead of #000, and on a brand-colored panel I'll tint the shadow with the panel's own hue. Second, if you find yourself pasting the same shadow-[...] arbitrary value into a third component, stop and copy the theme snippet instead. Tailwind v4 does this with a --shadow-* custom property inside @theme; v3 does it under theme.extend.boxShadow. Either way you get a named utility, and future-you gets to change all of them in one place.