Tailwind Gradient Generator: Build Background Gradients

How to use the tailwind gradient generator

1. Select the direction for your tailwind gradient using the dropdown menu.
2. Choose a From color and a To color from the Tailwind v3 palette.
3. Optionally pick a Via color if you need a three-stop gradient.
4. Copy the generated bg-gradient-to-* classes or the equivalent CSS directly into your project.

How Tailwind CSS Gradients Work

Tailwind CSS uses a set of composable utility classes to build linear gradients. Instead of writing a long CSS value, you combine a direction class like bg-gradient-to-r with color stop classes such as from-blue-500 and to-purple-500. Under the hood, Tailwind sets CSS custom properties: --tw-gradient-from, --tw-gradient-via, and --tw-gradient-to. The final background image is assembled automatically.

For example, applying bg-gradient-to-r from-blue-500 to-purple-500 generates this CSS:

background-image: linear-gradient(to right, var(--tw-gradient-stops));

The stops resolve to #3b82f6 transitioning to #a855f7. This tailwind gradient generator computes those hex values for you so you can verify exactly what the browser will render.

Common Direction Classes Reference

Every tailwind css gradient generator needs to map directions correctly. Here is the reference table for all eight linear gradient directions available in Tailwind v3:

Using the Via Modifier for Three Stops

A standard tailwind gradient uses two stops: a starting color and an ending color. When you need a middle transition point, add the via-{color} class. For instance, from-red-500 via-orange-500 to-yellow-500 creates a sunset effect passing through three distinct hues.

Tailwind handles the math by inserting the via color at the 50% mark of the gradient line. You do not need to specify percentages manually unless you extend the default configuration in tailwind.config.js. If you are working on typography effects rather than backgrounds, check out the text gradient generator instead.

Converting Between Tailwind and Standard CSS

Sometimes you need the raw CSS output rather than utility classes, especially when integrating with frameworks that do not use Tailwind or when debugging rendering issues. This tool provides both formats side by side.

If you already have existing stylesheets and want to migrate them to utility classes, the css to tailwind converter can help automate that process. Conversely, knowing the exact hex codes behind each Tailwind shade ensures your designs remain consistent whether you write bg-blue-500 or background-color: #3b82f6.

Practical Use Cases for Background Gradients

Background gradients appear frequently in modern interfaces. Hero sections often use a subtle bg-gradient-to-b from-slate-900 to-slate-800 to add depth without heavy imagery. Call-to-action buttons might use a vibrant bg-gradient-to-r from-pink-500 to-rose-500 to draw attention.

• Overlays: Place a semi-transparent gradient over images to ensure text readability.
• Loading skeletons: Animate a gradient sweep across placeholder blocks.
• Card backgrounds: Use soft pastel transitions like from-indigo-50 to-white for subtle elevation.

Because these utilities compile down to standard CSS, they perform identically to hand-written gradient rules while keeping your markup clean and maintainable.

Worked examples