GradientX - CSS & Tailwind Gradient Generator with OKLCH

Gradients that stay vivid, in code you can paste

GradientX pairs a curated gallery with a precise editor. Blend in OKLCH to keep the middle of a gradient bright instead of muddy, preview it on real UI, and copy CSS or exact Tailwind v4 classes. Everything runs in your browser.

How it works

  1. 01

    Pick a starting point

    Browse 300+ gradients by mood or search by name or hex. The gallery follows your current direction and color space.

  2. 02

    Tune it

    Switch between linear and radial, set the angle, and add, move or recolor up to five stops.

  3. 03

    Copy the code

    Get CSS with an sRGB fallback, or Tailwind v4 utilities with the matching color-space modifier.

Export formats

CSS
A background declaration, plus a gradient-text class. OKLCH output includes an sRGB line first for older browsers.
Tailwind CSS v4
bg-linear and bg-radial with from, via and to stops and a color-space modifier such as /oklch. More than three stops use an arbitrary value.

FAQ

Why blend in OKLCH?

sRGB mixes colors channel by channel, so blue to yellow passes through grey. OKLCH interpolates lightness, chroma and hue, so the middle stays saturated and evenly bright.

Why do the Tailwind classes include /srgb or /oklch?

Tailwind v4 blends gradients in OKLab by default. Stating the color space makes your site match this preview exactly.

Do browsers support OKLCH gradients?

Yes, all current versions of Chrome, Edge, Safari and Firefox. The CSS export adds an sRGB fallback line just in case.

More tools

ColorX Tailwind & shadcn/ui theme generatorFontX Font pairing and type scale for developersImageX Compress and convert images to WebP, AVIF and moreCropX Crop to any ratio or size, and redactSvgX Optimize SVG and convert it to code or PNGRunX Paste HTML, React or Vue code and see it run