Pick a direction and colors, then copy the ready-to-paste Tailwind class — supports both v3 and v4 syntax, no signup required.
How the Tailwind Gradient Generator Works
Tailwind builds a gradient from three pieces: a direction utility, a starting color, and an ending color. This tool takes your picks for each piece and assembles them into a single class string in the order Tailwind expects.
The direction comes first — bg-gradient-to-r in v3, or bg-linear-to-r in v4 — and sets which way the CSS linear-gradient() function points. Next comes the from-* color, which marks where the gradient starts. If you enable a middle color, via-* sits between them. Every gradient ends with a to-* color.
Colors can come from two places. Choosing a color from Tailwind’s default palette (like purple-600) generates a clean utility class. Choosing a custom hex value generates an arbitrary-value class instead, wrapped in square brackets — from-[#7c3aed] — which Tailwind compiles into the same CSS without needing a config change.
Turning on advanced stop positions adds a percentage to each color, like from-10% and to-90%, giving finer control over exactly where each color starts blending into the next — the same percentage values that show up in the raw CSS linear-gradient() output underneath.
Tailwind v3 vs v4 Gradient Syntax
The biggest difference between Tailwind v3 and v4 gradients is the direction prefix: v3 uses bg-gradient-to-*, v4 uses bg-linear-to-*. Everything else about linear gradients — the from-*, via-*, and to-* color stops — works the same way in both versions.
Projects still on Tailwind v3 (the majority of existing sites and tutorials) should use bg-gradient-to-r. Projects on Tailwind v4 should use bg-linear-to-r — the old bg-gradient-to-* classes were renamed as part of v4’s broader background-image utility overhaul, which also added native bg-radial and bg-conic utilities for gradient types v3 couldn’t do without a plugin.
If you’re not sure which version a project is running, check package.json for the tailwindcss dependency version, or look at tailwind.config.js — v4 projects typically configure theme values directly in CSS instead. When in doubt, generate the v3 version first, since it’s still the more common syntax across live sites.
When to Use This Tool
- Building a client site header or hero section — generate a brand-matched gradient without writing a config file or guessing at color-stop values.
- Migrating a project from Tailwind v3 to v4 — quickly convert existing
bg-gradient-to-*classes to the v4bg-linear-to-*equivalent. - Prototyping design variations fast — swap direction and colors visually before committing to a final class in your markup.
Frequently Asked Questions
How do I add a gradient background in Tailwind CSS?
Combine a direction utility with from-* and to-* color utilities on the same element, like bg-gradient-to-r from-purple-600 to-blue-500 in Tailwind v3, or bg-linear-to-r from-purple-600 to-blue-500 in Tailwind v4.
What does bg-gradient-to-r mean?
It’s Tailwind v3’s utility for a left-to-right linear gradient — the to-r sets the direction, and it must be paired with at least a from-* color to render. In Tailwind v4, the same direction is written bg-linear-to-r.
Why isn’t my Tailwind gradient showing up?
The most common cause is a missing from-* or to-* class — a direction utility alone doesn’t produce a visible gradient. The second most common cause is using v4 syntax (bg-linear-to-r) on a v3 project, or vice versa, since each version only recognizes its own prefix.
Can I use a custom hex color in a Tailwind gradient?
Yes — wrap the hex value in square brackets as an arbitrary value, like from-[#7c3aed], instead of a palette name like from-purple-600. This works in both Tailwind v3 and v4 without editing tailwind.config.js.
What’s different about gradients in Tailwind v4?
Tailwind v4 renamed bg-gradient-to-* to bg-linear-to-* and added native bg-radial and bg-conic utilities for gradient types that previously required arbitrary values or a plugin in v3. Color stop utilities (from-*, via-*, to-*) work the same in both versions.