Tailwind CSS Gradient Generator — Classes, Code, and When to Use Each

Tailwind CSS has built-in gradient utilities, but they cover only a subset of what you can do with raw CSS gradients. Our CSS gradient generator outputs pure CSS that you can use in Tailwind's [] arbitrary value syntax — giving you the best of both worlds: Tailwind's workflow with full gradient control. This guide covers both approaches.

Tailwind's Built-In Gradient Classes — What They Cover

Tailwind includes gradient utilities out of the box:

• bg-gradient-to-r — left to right (90deg)
• bg-gradient-to-br — top left to bottom right (135deg)
• bg-gradient-to-b — top to bottom (180deg)
• from-{color} — starting color stop
• via-{color} — optional middle stop
• to-{color} — ending color stop

Example: bg-gradient-to-r from-purple-600 to-blue-500 produces a left-to-right gradient from Tailwind's purple-600 to blue-500. Add via-pink-500 between from and to for a three-color gradient.

This works great for Tailwind palette colors. But if your designer gave you hex codes, or if you want a custom angle like 72deg, or a radial/conic gradient — you need a different approach.

Custom Tailwind Gradients With Arbitrary Values

Tailwind v3 and v4 support arbitrary CSS values using square brackets. You can write any CSS directly in a class:

<div class="bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]">
  ...
</div>

Use the gradient generator to generate the CSS value, then wrap it in bg-[...]. Replace spaces with underscores in the Tailwind arbitrary value (Tailwind parses spaces as class separators). Commas work fine. The full gradient function sits inside the brackets.

For text gradients in Tailwind: class="bg-[linear-gradient(90deg,#667eea,#764ba2)] bg-clip-text text-transparent" — use Tailwind's bg-clip-text and text-transparent utilities alongside the arbitrary background value.

Sell Custom Apparel — We Handle Printing & Free Shipping

Extending Tailwind Config for Reusable Custom Gradients

If you use the same gradient across multiple components, define it in your Tailwind config instead of repeating arbitrary values:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'brand-gradient': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        'hero-gradient': 'linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)',
      }
    }
  }
}

This creates utility classes bg-brand-gradient and bg-hero-gradient that you can use throughout your project. Combine with standard Tailwind classes: class="bg-brand-gradient rounded-xl p-6 text-white".

Radial and Conic Gradients in Tailwind CSS

Tailwind v4 added native radial and conic gradient utilities. In Tailwind v3, use arbitrary values or config extensions:

<!-- Radial gradient (Tailwind v4) -->
<div class="bg-radial from-blue-500 to-purple-600">...</div>

<!-- Radial gradient (Tailwind v3 arbitrary) -->
<div class="bg-[radial-gradient(ellipse_at_center,#667eea_0%,#764ba2_100%)]">...</div>

Generate your radial gradient in the gradient generator, switch the type to Radial, adjust the position and shape, and copy the resulting CSS value. Wrap it in Tailwind's arbitrary bracket syntax for v3, or use the native v4 utilities if your project is on the latest version.

When to Use a CSS File Instead of Tailwind Classes

Tailwind arbitrary values become awkward for complex gradients with 4+ color stops, animated gradients (which need @keyframes), or gradients applied conditionally with JavaScript. For these cases, write standard CSS in a stylesheet:

1. Generate the gradient in the gradient generator
2. Copy the complete CSS value
3. Paste it into your CSS file with @apply or a regular selector
4. Reference the class in your HTML normally

This keeps your Tailwind template clean and keeps complex gradient logic in CSS where it belongs. The generator produces standard CSS that works with any Tailwind setup — no plugin required.

Frequently Asked Questions

How do I add a custom hex color gradient in Tailwind?

Use Tailwind's arbitrary value syntax: bg-[linear-gradient(90deg,#667eea_0%,#764ba2_100%)]. Replace spaces with underscores. Generate the full gradient CSS in our CSS gradient generator, then wrap the value in bg-[...] for Tailwind.

Does Tailwind support radial gradients natively?

Tailwind v4 adds native radial and conic gradient utilities. In Tailwind v3, use arbitrary values: bg-[radial-gradient(circle,#667eea,#764ba2)]. You can also extend your tailwind.config.js to add reusable gradient names.

How do I make gradient text in Tailwind CSS?

Combine an arbitrary background gradient with Tailwind's built-in utilities: class="bg-[linear-gradient(90deg,#667eea,#764ba2)] bg-clip-text text-transparent". The bg-clip-text and text-transparent classes are built into Tailwind.

Can I use Tailwind gradient classes with custom colors from my design system?

Yes. Extend your Tailwind config with your design system colors, then use from-{your-color} and to-{your-color} classes. Or define named gradient backgrounds in the backgroundImage section of your config for reusable gradient utilities.