Tailwind gradient generator
Pick two or three colours and a direction; get the classes for Tailwind v4 and v3, the OKLCH variant, and the plain CSS. Background or text. Nothing leaves your browser.
Where gradients go wrong
Two saturated colours far apart on the wheel — blue to orange, purple to green — pass through grey in
the middle when interpolated in sRGB. Tick OKLCH interpolation: v4 adds /oklch
to the class and the CSS gets in oklch, and the midpoint stays vivid. Or add a via
colour and pick the midpoint yourself.
Keep gradients for one hero or one button state; everywhere else a flat colour from your palette reads better. The landing page builder has a brand-coloured hero band if you want a strong first screen without a gradient.
Questions
Why arbitrary values like from-[#2b59ff]?
So the classes work with any colour without editing your config. If the colour is in your palette, replace from-[#2b59ff] with from-brand-500 — same classes otherwise.
What changed between v3 and v4?
v4 renamed bg-gradient-to-r to bg-linear-to-r, added any angle (bg-linear-45) and an interpolation modifier (bg-linear-to-r/oklch) that avoids the grey dead zone in the middle of two-colour gradients. v3 classes still work in v4 for compatibility.
Text gradients?
Switch the type to Text: the box shows a heading with the gradient clipped to the letters, and the code adds bg-clip-text text-transparent. Keep a fallback colour for browsers that block it — the code includes one.
Is anything uploaded?
No. Nothing leaves your browser.