Tailwind CSS Gradient Generator
Pick 2–3 colors and a direction, preview the gradient live, and copy ready-to-use Tailwind CSS classes or raw CSS. No account needed.
Colors
Direction
bg-gradient-to-r from-[#0e7490] to-[#1d4ed8]
background-image: linear-gradient(to right, #0e7490, #1d4ed8);
Frequently Asked Questions
How do I use the generated Tailwind classes?
Copy the bg-gradient-to-* class along with the from-[#hex] and to-[#hex] (and via-[#hex] for 3 colors) classes, and add them directly to any element's className. Tailwind v4 supports arbitrary hex values in brackets natively.
Can I use more than 3 colors in a gradient?
Tailwind's utility classes support from/via/to (3 stops). For more stops, use the generated raw CSS linear-gradient() value directly in a custom class or inline style.
Why use via- instead of just from- and to-?
via- sets a middle color stop, letting the gradient pass through a third color instead of blending directly between just two. It's essential for multi-color gradients like 'Candy' or sunset effects.
Does this work with radial gradients?
This tool focuses on linear gradients, which cover the vast majority of UI use cases (buttons, hero backgrounds, cards). The raw CSS output can be adapted to radial-gradient() manually if needed.
More free tools & components
Pick colors that match your gradient with our palette generator.