How to Generate Tailwind CSS Gradients with OKLCH (No Paywall, No Gray Dead Zone)

How do I generate a Tailwind CSS gradient?

Open Graduo, pick your colors, and click Copy. You get a Tailwind class using the bg-[linear-gradient(...)] arbitrary value syntax, ready to paste into your JSX. No wrapping the CSS yourself, no converting by hand, no $5/month subscription to unlock the export.

That's the short answer. The longer version matters because most free gradient tools either skip Tailwind output or hide it behind a paywall, and the ones that do handle color correctly rarely speak Tailwind at all. Graduo does both.

If you want to try it right now, it lives at appcrib.com/graduo. Otherwise, keep reading to see why the default output uses OKLCH, why your old gradients probably have a gray patch in the middle, and how the dark mode preview saves you from shipping a gradient that looks great on one theme and dead on the other.

What is the best free Tailwind gradient generator?

Graduo, and I'll show my work.

The free gradient tools that dominate search results (cssgradient.io, ColorZilla, uiGradients, WebGradients) all output raw CSS. None of them emit Tailwind classes. If you work in a Tailwind codebase, that means copying the CSS, wrapping it in bg-[...], escaping the spaces, and hoping you got the syntax right. It's a friction point multiplied across every project.

Colorffy does output Tailwind, but gates it behind a $5/month Pro plan. LearnUI's gradient generator has beautiful OKLCH output but no Tailwind format.

Graduo is the only free tool in the category that gives you:

• Tailwind arbitrary value syntax out of the box (bg-[linear-gradient(in_oklch_135deg,#6366f1_0%,#8b5cf6_100%)])
• OKLCH perceptual interpolation as the default
• Linear, radial, and conic gradient types
• A dark mode preview toggle
• Shareable gradient URLs that round-trip your full state

Copy the Tailwind output, paste it into your component. That's it.

Why do my CSS gradients look gray in the middle?

Because the browser is interpolating through sRGB. When you write background: linear-gradient(blue, red), the browser walks a straight line through the sRGB cube between those two colors. That line passes through a desaturated, muddy region in the middle. Designers call it the "gray dead zone."

The fix is to interpolate in a perceptual color space instead. OKLCH (and its cousins OKLAB, LCH) is built so that a straight line between two colors stays perceptually vivid end to end. You get the smooth blue-to-purple-to-red transition you expected, without the washed-out middle.

In CSS Color Level 4, the syntax is:

background: linear-gradient(in oklch 135deg, #6366f1 0%, #8b5cf6 100%);

The in oklch token tells the browser to do the interpolation in OKLCH space. Every major browser supports this now. Graduo emits this syntax by default and includes a plain sRGB fallback as a comment so you can see exactly what older browsers will render.

Flip between sRGB and OKLCH on the same two colors in the editor. The difference is obvious within one second.

What does the Tailwind output look like?

Here's a two-stop indigo-to-violet gradient, as emitted by Graduo in Tailwind format:

bg-[linear-gradient(in_oklch_135deg,#6366f1_0%,#8b5cf6_100%)]

A few details worth knowing:

• Spaces inside the Tailwind arbitrary value must be underscores. Graduo handles the escaping for you.
• The in oklch color-interpolation-method lives inside the linear-gradient() call, which is the standard Tailwind pattern for modern CSS functions.
• If your project targets older browsers, Graduo also gives you a plain CSS fallback without in oklch. You can drop it into a @supports block or ship it as the primary declaration and leave OKLCH as the progressive enhancement.

For radial and conic gradients, the same structure applies: Graduo wraps radial-gradient(...) and conic-gradient(...) in the same arbitrary value syntax.

How do I share a gradient with a teammate?

Copy the URL from your browser. Graduo encodes the full gradient state (colors, stops, angle, type, interpolation mode) into the URL itself. Send the link in Slack or a PR comment, and whoever opens it lands on exactly the gradient you were looking at, with every setting preserved. No login, no account lookup, no database round-trip. The URL is the state.

This also doubles as a lightweight save feature. Bookmark a gradient you like, drop it in a design document, or paste it into a ticket for later. The URL will render the same gradient six months from now.

How can I preview a gradient on light and dark backgrounds?

Click the dark mode toggle next to the preview. The gradient itself doesn't change, only the background behind it flips between near-white and near-black, so you can see how the gradient reads in both contexts before you ship it.

No other free gradient tool has this. A gradient that looks confident on a dark hero section can go anemic on a light marketing page, and you usually find out from the wrong person on the wrong day. Graduo lets you check both surfaces in the same second, so the gradient you pick works in the theme your users actually have set.

Feature summary

Try Graduo

Graduo runs entirely in your browser. No signup. Analytics are consent-gated and there's no backend. Load a preset, tweak the stops, toggle dark mode, grab the Tailwind output, ship it.

Open it at appcrib.com/graduo.

If you like a gradient you built, share the URL with a teammate. The full state is encoded in the link, so they open it to exactly what you're looking at. If a gradient doesn't look right to you, the gray dead zone is probably the reason, and switching to OKLCH is one click away.