Gradient Palette Creator

A gradient isn't just two colors and a direction — it's a path the renderer walks from one stop to the next, and where that path travels through color space decides whether the result looks rich or muddy. By default CSS interpolates in sRGB, which draws a straight line between colors in a non-perceptual space; blend two saturated complements that way and the line passes through the desaturated gray at the center, which is why so many amateur gradients have a dishwater middle. The fixes are to steer the path with an intermediate stop in a brighter related hue, choose analogous colors that never cross the gray zone, or tell CSS to interpolate in a perceptual space with in oklch — the modern, cleanest answer.

The three gradient types are three different geometries of that path. Linear walks it along a straight line at your chosen angle — the workhorse for backgrounds and buttons. Radial radiates it outward from a center, which is how you build spotlights, glows and depth. Conic sweeps it around a center like a clock hand, which is what makes color wheels, pie charts and loading rings. Same stops, three very different results — the deep-analysis panel shows all three at once so you can feel the difference.

Then there's legibility, the thing gradients quietly break. Contrast for any text on a gradient is governed by the worst point the text crosses, not the average, so a hero that looks fine in the middle can fail where the gradient is lightest or darkest. The robust patterns are to keep the gradient within a narrow lightness band behind text, drop a translucent scrim between gradient and text, or position text only where contrast holds — and to test the extreme stops, not eyeball the midpoint.

So build the gradient here — pick the geometry, place the stops, dial the angle, and copy the CSS straight into your stylesheet or a Tailwind arbitrary value. Source the stop colors from a coherent set in the Palette Generator, read any stop in every format with the Converter, and verify overlay text in the Accessibility Checker.