Tailwind Gradient Generator
Design modern linear, radial, and conic gradients with instant Tailwind CSS v4 utility classes. Customize theme tokens, custom HEX stops, exact stop percentages, and interpolation modifiers.
Tailwind CSS v4 Live Preview
Tailwind Stops
Gradient Controls
Tailwind v4 Classes
bg-linear-to-r from-cyan-400 from-0% via-teal-500 via-52% to-slate-900 to-100%How Our Tailwind Gradient Generator Works
Build copy-ready Tailwind CSS v4 gradient utility strings in three steps.
Select Gradient Style & Direction
Choose between Tailwind v4 linear (`bg-linear-*`), radial (`bg-radial`), or conic (`bg-conic-*`) utilities and set your angle or position.
Pick Theme Tokens or Custom HEX
Configure `from-*`, `via-*`, and `to-*` stops using built-in Tailwind palette tokens or arbitrary HEX colors with stop percentages.
Copy Utility Classes
Preview the live gradient on sample UI components and copy the complete Tailwind class string or raw CSS equivalent.
Key features
Purpose-built for developers using Tailwind CSS v4 utility classes.
Tailwind CSS v4 Syntax
Generates modern `bg-linear-*`, `bg-radial`, and `bg-conic-*` utilities with slash-based color space modifiers like `/oklch` and `/oklab`.
Exact Stop Percentages
Fine-tune `from-10%`, `via-50%`, and `to-90%` positions visually and toggle the middle `via` stop on or off in one click.
Browser-Local Processing
Your files are processed directly in your browser and are not uploaded to Pinatool's servers.
Frequently Asked Questions
Everything you need to know about Tailwind CSS v4 gradient utility generation.
Which Tailwind CSS version does this generator support?
This generator produces modern Tailwind CSS v4 utility classes, including bg-linear-*, bg-radial, bg-conic-*, exact stop percentages (e.g. from-0%, via-50%, to-100%), and color interpolation modifiers.
How do arbitrary colors work in Tailwind CSS?
When you pick a custom color not in the default Tailwind theme, the generator formats it using bracket notation (e.g. from-[#22d3ee]). The Tailwind compiler recognizes this syntax and generates the appropriate CSS variable automatically.
What are Tailwind v4 interpolation modifiers?
Tailwind CSS v4 introduces slash-based interpolation modifiers on gradient utilities (e.g. bg-linear-to-r/oklch, bg-linear-to-r/hsl, or bg-linear-to-r/longer). While Tailwind defaults to OKLab for smoother transitions, you can specify alternative color spaces or hue paths directly in class names.
Can I create a simple two-stop gradient without a middle color?
Yes. Simply remove the via stop in the stop manager, and the generator will produce a clean two-stop gradient (from-* and to-*) without intermediate interpolation stops.
Are my gradient choices uploaded or tracked?
No. All utility generation, color matching, and preview rendering run 100% locally in your browser. No styles or user inputs leave your machine.
Explore More Tools
More free utilities for CSS gradients, Tailwind color scales, and accessible themes.