Build Tailwind gradients visually — direction, two or three color stops — and copy the classes in v4 (bg-linear-to-*) or v3 (bg-gradient-to-*) form, or as plain CSS.
Generated locally in your browser — your colors, settings and code never leave this page.
Gradients in utility classes
Tailwind expresses gradients as three cooperating utilities: a direction class sets the background-image, and from-/via-/to- classes plant the color stops. This generator assembles them visually — pick direction and colors, watch the live preview — and emits the correct class family for your version: bg-linear-to-r (v4) or bg-gradient-to-r (v3), plus the plain-CSS equivalent.
Worked example
<!-- v4 -->
<div class="bg-linear-to-r from-indigo-500 to-pink-500"></div>
/* CSS equivalent */
background-image: linear-gradient(to right, #6366f1, #ec4899);When to use it
- Hero and CTA backgrounds where flat color feels inert.
- Subtle two-stop washes behind cards and banners.
- Brand-colored button hovers via gradient shifts.
Limitations
- Core stop classes place colors evenly; per-stop percentages need newer Tailwind stop-position utilities or the CSS output.
- Colors far from the palette become arbitrary values (from-[#hex]) — exact, and noted in the output.
- Gradient text needs the extra bg-clip-text text-transparent pair on top of these classes.
How to use the Tailwind Gradient Generator
- Pick the direction and your from/to colors (add a via stop for three-color blends).
- Watch the gradient preview update live.
- Choose the output: v4 classes, v3 classes, or plain CSS.
- Copy — colors matching the palette use named stops (from-blue-500); others become arbitrary values.
Frequently asked questions
What changed about gradients in Tailwind v4?
The class family was renamed: bg-gradient-to-r (v3) became bg-linear-to-r (v4), making room for new bg-radial and bg-conic utilities. The from-/via-/to- stop classes are unchanged. This generator emits both generations.
Why did my color become from-[#a1b2c3]?
Because it has no close match in the Tailwind palette. Arbitrary values are exact and fully supported — or run the color through the HEX to Tailwind tool to find the nearest named alternative.
Can I control where each color stop sits?
With core classes, stops are evenly placed; percentage control (from-10%, via-40%) exists in newer Tailwind versions, and the plain-CSS output gives full stop control for anything more precise.
