Free Tailwind CSS Gradient Generator

Build gradients visually and get Tailwind CSS utility classes instantly. Supports bg-gradient-to directions, from/via/to color utilities, and arbitrary values for complex gradients.

Tailwind Gradient Utilities Explained

Tailwind's gradient system uses three main utilities: from-{color} sets the start color, via-{color} adds an optional middle color, and to-{color} sets the end color. Combine with a direction class like bg-gradient-to-r (left to right).

Direction Class Reference

Direction classes map to CSS angles: bg-gradient-to-t = 0°, bg-gradient-to-tr = 45°, bg-gradient-to-r = 90°, bg-gradient-to-br = 135°, bg-gradient-to-b = 180°, bg-gradient-to-bl = 225°, bg-gradient-to-l = 270°, bg-gradient-to-tl = 315°.

Beyond Simple Gradients

For radial, conic, or multi-stop gradients, use Tailwind's arbitrary value syntax: bg-[radial-gradient(circle,#f093fb,#f5576c)]. In Tailwind v4, you can define gradient custom properties in your CSS and reference them in utility classes.

Build your gradient below and copy the Tailwind classes.

deg
Color Stops
bg-gradient-to-br from-[#667eea] to-[#764ba2]

What Is the Tailwind Gradient Generator?

This free tool lets you build CSS gradients visually and get Tailwind CSS utility classes with one click. For simple linear gradients, it outputs native Tailwind utilities like bg-gradient-to-br from-[#667eea] to-[#764ba2]. For complex gradients (radial, conic, 4+ stops), it generates the arbitrary value syntax. The Tailwind output tab is pre-selected so you can start copying classes immediately.

How to Use This Tool

Step 1: Build your gradient. Choose colors and set the angle using the visual controls. The Tailwind output tab is pre-selected.

Step 2: Check the output. For 2-3 stop linear gradients, you'll see native Tailwind classes. For anything more complex, the tool shows the appropriate arbitrary value syntax.

Step 3: Copy and paste. Click Copy Code and paste the classes directly into your JSX, HTML, or template file.

Step 4: Browse presets (optional). Open the preset gallery to find gradient inspiration. Every preset generates valid Tailwind output.

Key Features

Smart output format. The tool detects whether your gradient can use native Tailwind utilities or needs arbitrary value syntax. Simple 2-3 stop linear gradients output clean utility classes. Complex gradients output the bg-[...] syntax that works in Tailwind v3 and v4.

Angle-to-direction mapping. Gradient angles are automatically mapped to the closest Tailwind direction class: 45° becomes bg-gradient-to-tr, 90° becomes bg-gradient-to-r, and so on.

CSS Variables output for v4. Switch to the CSS Variables tab for custom properties that integrate with Tailwind v4's CSS-first configuration. Define gradient tokens in your theme and reference them across your project.

Multiple format fallback. If you need vanilla CSS, SCSS, or CSS custom properties alongside the Tailwind output, just switch tabs. All four formats are generated simultaneously.

Tailwind Gradient Utilities Cheat Sheet

Direction classes. Eight built-in directions: bg-gradient-to-t (0°, upward), bg-gradient-to-tr (45°), bg-gradient-to-r (90°, rightward), bg-gradient-to-br (135°), bg-gradient-to-b (180°, downward), bg-gradient-to-bl (225°), bg-gradient-to-l (270°, leftward), bg-gradient-to-tl (315°).

Color stop utilities. from-blue-500 sets the start color with a transparent end point. to-purple-500 sets the end color. via-pink-500 inserts a midpoint color. Use arbitrary values for custom colors: from-[#667eea].

Arbitrary gradient syntax. For anything beyond simple linear gradients, use bg-[linear-gradient(135deg,#667eea,#764ba2)]. This works for radial: bg-[radial-gradient(circle,#f093fb,#f5576c)] and conic: bg-[conic-gradient(from_0deg,red,blue,red)]. Replace spaces with underscores in arbitrary values.

Tailwind v4 approach. In v4, define CSS custom properties in your @theme block and reference them in utilities. This keeps your gradient definitions centralized and reusable across your design system.

Frequently Asked Questions

How do Tailwind gradient classes work?

Tailwind uses three utility classes for gradients: from-{color} (start color), via-{color} (optional middle color), and to-{color} (end color). Combine with a direction class like bg-gradient-to-r (left to right) or bg-gradient-to-br (top-left to bottom-right).

What direction classes are available?

Tailwind provides 8 direction utilities: bg-gradient-to-t (up), bg-gradient-to-tr (top-right), bg-gradient-to-r (right), bg-gradient-to-br (bottom-right), bg-gradient-to-b (down), bg-gradient-to-bl (bottom-left), bg-gradient-to-l (left), bg-gradient-to-tl (top-left).

What about gradients with 4+ stops?

Tailwind's native gradient utilities support up to 3 stops (from, via, to). For gradients with more stops, radial gradients, or conic gradients, this tool generates the arbitrary value syntax: bg-[linear-gradient(...)] which works in Tailwind v3+ and v4.

Does this support Tailwind v4?

Yes. The output works with both Tailwind v3 and v4. For Tailwind v4's CSS-first configuration approach, the CSS Variables tab provides custom properties you can reference in your @theme config.

Can I use custom hex colors in Tailwind gradients?

Yes. Use arbitrary value syntax: from-[#667eea] via-[#8b5cf6] to-[#764ba2]. This works with any hex, rgb, or hsl color value.

How do I create a radial gradient in Tailwind?

Tailwind doesn't have built-in radial gradient utilities. Use the arbitrary value syntax: bg-[radial-gradient(circle,#f093fb,#f5576c)]. This tool generates the correct syntax automatically.

Related Tools

CSS Gradient Generator

All gradient types in one tool

Color Picker & Converter

Pick colors and convert between HEX, RGB, HSL

JSON Formatter

Format and validate JSON

QR Code Generator

Create custom QR codes