Tailwind shadow generator

← All tools

Stack shadow layers, preview the result, and copy a Tailwind v4--shadow-* @theme token or an arbitrary shadow-[…] class.

~~~

Presets

Token name

Becomes --shadow-{name} and utility shadow-{name}.

Layers

Preview

~~~

Output

@theme token

Utility after theme

Arbitrary class (no theme)

Shadow settings are saved in the URL for sharing.

~~~

About this tool

In Tailwind v4, named shadows are theme variables like--shadow-md. Define your own with @theme, then useshadow-card (or whatever you named it). For one-offs, use an arbitrary value class.

Layered shadows (two soft offsets) usually look more natural than a single hard blur — the presets mirror the default Tailwind sizes.

~~~

Read more