Tailwind CSS Gradient Generator — Visual Editor & Class Generator

Tailwind CSS Gradients in 2026

Tailwind makes gradients approachable, but the utility-class syntax still trips people up — especially since Tailwind v4 changed the direction utilities. A visual tailwind css gradient generator lets you design the gradient by eye and copy the exact classes, so you never have to guess whether it's bg-gradient-to-r or bg-linear-to-r. TooStamply's gradient tool outputs Tailwind classes for v3 and @theme tokens for v4, right alongside plain CSS and SCSS.

This guide covers the utility syntax, direction and color-stop classes, gradient text, and how to generate everything visually instead of hand-writing it.

Gradient Utility Basics

At its simplest, a Tailwind gradient needs a direction and two color stops:

<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Gradient background
</div>

In Tailwind v4 the direction utility is renamed, so the same tailwind background gradient is written like this:

<div class="bg-linear-to-r from-blue-500 to-purple-600">
  Gradient background
</div>

The generator emits whichever syntax you target, so you don't have to memorize the migration.

Gradient Directions

Each direction has its own utility. Here's the full set for a linear tailwind gradient:

Color Stops

Tailwind gradients use up to three stops:

• from-{color} — the starting color
• via-{color} — an optional middle color
• to-{color} — the ending color

A three-stop tailwind css gradient background looks like this:

<div class="bg-gradient-to-r from-rose-500 via-fuchsia-500 to-indigo-500">
  Three-stop gradient
</div>

Under the hood Tailwind compiles that to standard CSS custom properties feeding a linear-gradient():

.example {
  background-image: linear-gradient(
    to right,
    #f43f5e 0%,
    #d946ef 50%,
    #6366f1 100%
  );
}

Gradient Text with Tailwind

A popular effect is gradient text, achieved by clipping the background to the text shape:

<h1 class="bg-gradient-to-r from-blue-600 to-violet-600
           bg-clip-text text-transparent">
  Gradient Text
</h1>

The equivalent hand-written CSS uses background-clip: text:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

For borders and other text tricks, see the gradient border and text effects guide.

Radial and Conic Gradients in Tailwind

Linear gradients get the most attention, but Tailwind v4 also ships radial and conic utilities, and older projects can reach the same result with arbitrary values. A radial background works well for soft spotlights and cards:

<div class="bg-radial from-amber-300 to-rose-500">
  Radial glow
</div>

If your build predates the dedicated utilities, you can drop the raw function into an arbitrary value, which the generator will produce for you:

<div class="bg-[conic-gradient(from_0deg,#ff5f6d,#ffc371,#ff5f6d)] rounded-full">
  Conic wheel
</div>

Being able to see the shape before you commit to a class saves a lot of trial and error, which is the whole point of a visual tailwind css gradient editor. For layered, organic washes, the mesh gradient guide shows how to stack several radial layers — and the generator exports those as arbitrary-value Tailwind classes too.

When to Reach for a Gradient

Gradients are a design tool, not decoration for its own sake. A few situations where they earn their place:

• Hero and feature sections that need visual weight without a hero image
• Buttons and calls to action that should feel tactile and clickable
• Empty states and cards that would otherwise read as flat gray boxes
• Section dividers and backgrounds that guide the eye down the page

Keep contrast in mind: if text sits on top of a gradient, check that the darkest and lightest parts of the sweep both pass contrast against your text color. The OKLCH support in the generator helps here, because you can hold lightness roughly constant across the gradient and avoid a spot where your text suddenly becomes unreadable.

Tailwind v4 @theme Tokens

Tailwind v4 leans on theme tokens. Instead of arbitrary values scattered through your markup, you can define a gradient-ready palette once and reference it everywhere:

@theme {
  --color-brand-start: oklch(0.72 0.19 25);
  --color-brand-end:   oklch(0.72 0.19 310);
}

Then use it in markup:

<div class="bg-linear-to-r from-brand-start to-brand-end">
  Themed gradient
</div>

The generator can export these @theme tokens directly, and it supports OKLCH values for smoother blends — the OKLCH guide explains why perceptually even color matters.

Popular Tailwind Gradient Combinations

A few reliable starting pairs:

• Blue to purple: from-blue-500 to-purple-600
• Green to teal: from-green-400 to-teal-500
• Orange to pink: from-orange-500 to-pink-500
• Indigo to cyan: from-indigo-500 to-cyan-400
• Rose to amber: from-rose-500 to-amber-500

You'll find dozens more in the UI gradients collection and the web gradients library — load any of them and copy the Tailwind classes.

How the Generator Helps

1. Open the gradient generator and design your gradient visually.
2. Pick the direction and drag color stops until the preview looks right.
3. Switch the export panel to Tailwind v3 or Tailwind v4 @theme.
4. Copy the classes or tokens straight into your components.
5. Need a button? The gradient buttons guide shows ready-made recipes.

Because everything is client-side and free, you can iterate as many times as you want without a signup or watermark.

Frequently Asked Questions

What's the difference between bg-gradient-to-r and bg-linear-to-r?

They're the same idea in different Tailwind versions. bg-gradient-to-* is the v3 syntax; bg-linear-to-* is the v4 syntax. The generator can output either, so you copy whichever your project uses.

Can I generate three-color Tailwind gradients?

Yes. Add a via-{color} stop between from and to, and the generator includes it in the exported classes.

Does it support Tailwind v4 @theme tokens?

It does. You can export gradient colors as @theme custom properties, including OKLCH values, and reference them as from- and to- utilities.

Can I make Tailwind gradient text?

Yes — combine a gradient background with bg-clip-text and text-transparent. The tool shows the exact class combination for text as well as backgrounds.

Ready to try it? Open the free CSS Gradient Generator →