Beautiful linear gradients, generated with precision.
Switch between background and text gradients, explore the full Tailwind palette, test interpolation modes such as oklch and srgb, and copy production-ready class names instantly.
v4 syntax
bg-linear-to-r / bg-linear-to-b classes
Interpolation
Default, oklch, srgb, hsl
Palette
Full Tailwind shades from 50 to 900
Creative Tim inspired presentation
Elevated gradient systems for modern UIs.
Use this surface to validate color balance, contrast, and text legibility before shipping your design.
Generator controls
Generate Tailwind CSS v4 gradient classes
Color selection
Direction
Interpolation Mode
Live preview
Your gradient surface
Tailwind CSS v4
Modern gradient mastery
bg-linear-to-r from-violet-600 via-fuchsia-500 to-indigo-600
Generated class
bg-linear-to-r from-violet-600 via-fuchsia-500 to-indigo-600Presets apply instantly
Tailwind Palette Coverage
The generator mirrors the Tailwind palette families and shade steps from 50 through 900 so you can build consistent gradients for product hero sections, dashboards, and landing pages.