RunLocalTools

Tailwind Shadow Generator — Box Shadow & Text Shadow Builder

Build a layered box-shadow or text-shadow visually and export it as plain CSS, a Tailwind arbitrary-value class, or a named v3 config / v4 @theme snippet — including Tailwind’s real default shadow scale.

What it does

A visual builder for box-shadow and text-shadow: stack multiple shadow layers, adjust offset/blur/spread/color/alpha on each, reorder them, and preview the result live against a light, dark, or custom background. When you’re happy with it, export the result as plain CSS, a Tailwind arbitrary-value class (shadow-[...]), or a ready-to-paste named snippet for either a Tailwind v3 tailwind.config.js or a Tailwind v4 @theme block.

How it works

Tailwind v4 actually renamed its default shadow scale from v3: what v3 called shadow (the unnamed default) is shadow-sm in v4, what v3 called shadow-sm is now shadow-xs, and v4 added a new, even smaller shadow-2xs step. The preset buttons switch between the real v3 and v4 default values depending on which version you’ve selected, so what you copy actually matches the version you’re running.

Text shadows get a specific note: Tailwind didn’t have any built-in text-shadow utility until v4.1 (released April 2025), which added text-shadow-2xs through text-shadow-lg plus arbitrary-value and custom-property support. If you’re still on Tailwind v3, there’s no core utility to fall back to — the tool instead gives you Tailwind’s generic arbitrary-property escape hatch, [text-shadow:...], which works in any Tailwind version and needs zero config.

Multiple shadow layers are combined the same way the browser and Tailwind’s own scale do it — comma-separated, each fully specified — and the “surprise me” and glow presets are just pre-filled layers you can keep tweaking afterward. The visibility hint under the preview blends your shadow’s color and opacity over the chosen background and flags it when the result would be nearly invisible; it’s a rough heuristic, not a formal contrast measurement (shadow visibility isn’t something WCAG defines a contrast ratio for).

How to use it

  1. Pick Box shadow or Text shadow, and your Tailwind version (v3 or v4) — this changes the presets and the named-snippet format to match.
  2. Start from a preset or build layers from scratch: add a layer, set its offset/blur/(spread)/color/alpha, and reorder with the arrows.
  3. Watch the live preview and the visibility hint against your chosen background.
  4. Give it a theme name, then copy whichever output fits your workflow — plain CSS to paste directly, the Tailwind class for a one-off use in your markup, or the named snippet to add to your config/theme so shadow-yourname or text-shadow-yourname becomes a reusable class everywhere.

Need the plain-CSS-only version with no Tailwind class output at all? See the Box Shadow CSS Generator. Picking a shadow color from Tailwind’s own palette first is easier with the Tailwind Colors Reference, and if you want the shadow itself to pulse or fade in, combine the CSS output here with the CSS Keyframe Animation Builder. For color/background effects beyond shadows, there’s also the Tailwind Gradient Generator.

FAQ

Why does my Tailwind class have underscores instead of spaces? That’s required Tailwind syntax for arbitrary values — a class name can’t contain a literal space, so Tailwind’s own convention is to write spaces as underscores (and escape any real underscore in the value as \_). Paste it exactly as generated; Tailwind converts it back to spaces internally.

Does text-shadow-* work in Tailwind v3? Not as a named utility — it was only added to Tailwind’s core in v4.1. On v3, use the “Tailwind class” tab’s arbitrary-property output ([text-shadow:...]), which needs no plugin and works in any version, or add a small community plugin like tailwindcss-textshadow if you want a short, reusable class name.

Why did my shadow’s named class change when I switched from v3 to v4? It didn’t — only the preset values shown changed, to match each version’s real default scale (v4 renamed shadow to shadow-sm and shadow-sm to shadow-xs). Your custom layers are untouched when you switch; only the “Named snippet” tab’s format (config file vs. @theme block) changes.

Can I animate the shadow itself? Yes — export the plain CSS box-shadow/text-shadow value and drop it into a @keyframes rule (the Keyframe Animation Builder linked above can help build that part), or toggle between two saved shadow states with a CSS transition on box-shadow (note that box-shadow transitions are not GPU-accelerated, so keep them subtle on large elements).

What does the “inset” checkbox do? It flips the shadow to render inside the element’s border box instead of outside it — useful for a pressed/carved-in look. It only applies to box-shadow; text doesn’t have an inset equivalent.

Why is my multi-layer shadow shown on one line in the CSS output? The Plain CSS tab pretty-prints multi-layer values across lines for readability; the Tailwind class and named-snippet outputs use a single-line, comma-separated value since that’s what a class name or config value requires.