CSS Gradient Generator

Getting a Gradient That Actually Looks Deliberate

• Try Smooth Interpolation (OKLCH) on any two-color gradient spanning distant hues — red-to-green or blue-to-yellow are exactly the cases where standard RGB blending produces a dull gray or brown patch in the middle.
• Check the Auto Contrast suggestion before finalizing a hero-section background — a gradient can look great empty and still make text nearly unreadable in its lighter half.
• Use Conic, not Radial, for anything wheel- or clock-shaped — a progress ring, a color wheel, or a pie-style segment display genuinely needs an angular sweep, which only conic-gradient() produces.
• Keep stop count modest. Two to four stops read as intentional; seven or eight usually reads as noise unless there's a specific pattern (like a striped repeating gradient) driving the count.

Features

Three Shapes, Three Different Jobs

Linear, radial, and conic gradients aren't interchangeable styling options — each one traces a fundamentally different path through color space, and picking the right one is a design decision, not a preference. A linear gradient moves in a straight line at a fixed angle, which is why it's the default choice for backgrounds, buttons, and banners — it reads as directional without drawing attention to a specific point. A radial gradient spreads outward from a center, which makes it the natural choice for a spotlight, a glow around an element, or a soft vignette at a page's edge — anything meant to draw the eye toward one spot. A conic gradient sweeps around a center point the way a clock's hand moves, and it's the only one of the three that can produce a genuine color wheel, a pie-chart segment, or a circular loading indicator — geometry linear and radial simply cannot express, no matter how the stops are arranged.

The angle and position controls change meaning slightly between the three, too. Linear and conic both use a rotation angle — 0° means "pointing up" for linear, and "starting at 12 o'clock" for conic's sweep. Radial has no rotation at all; instead it offers a shape (circle or ellipse) and a center position, since rotating a symmetric shape around its own center wouldn't change anything visible. Applying a preset first and then adjusting from there is usually faster than configuring a type from a blank slate, precisely because the right starting controls aren't obvious until you can see them react against a real gradient.

Why the Midpoint of a Gradient Often Looks Wrong

Blend red and green the way a browser does by default — interpolating the red, green, and blue channels independently — and the exact middle of that gradient computes to a flat, desaturated brown, not the vivid orange or yellow a person would expect standing between those two hues. That's not a bug, it's what RGB space actually looks like geometrically; the midpoint of two saturated colors in RGB frequently lands somewhere desaturated. OKLCH is built specifically to avoid this — it's a color space designed so that perceptually similar distances correspond to visually similar distances, which means a gradient interpolated through it passes through hues that look like they belong in between, not through gray. Turning on Smooth Interpolation adds CSS Color 4's in oklch hint directly to the generated gradient function; browsers that don't yet support it simply ignore the hint and fall back to standard interpolation, so the output never breaks — it just doesn't get the improvement on an older browser.

A Gradient That Looks Good Empty Can Still Fail With Text On It

The preview panel doesn't just show the gradient — it runs the WCAG relative luminance formula on every color stop, averages them, and checks the resulting contrast ratio against both pure white and pure black text, then displays whichever one actually wins along with the real number. This matters because a gradient's overall impression and its worst-case readability are two different things: a blue-to-yellow gradient might average out to something that contrasts fine with white text, while the yellow end specifically would make that same white text nearly invisible. Checking the suggestion before shipping a gradient as a hero-section or card background catches exactly that kind of edge-of-gradient readability problem before a real user runs into it.

It's worth being clear about what this check isn't: it's a fast heuristic based on the stops themselves, not a full analysis of every pixel a specific piece of text might sit on top of once the gradient renders at a particular size and angle. For a button or a short heading it's a genuinely reliable signal. For body text laid directly over a large, complex gradient, treat the number as a strong hint to test manually against the actual rendered result — inside the real HTML it's going into — rather than a guarantee.

Three Formats, Because Not Every Project Uses Plain CSS

The CSS output is the raw gradient() function, ready to paste into a background or background-image declaration in a stylesheet the usual way. The Tailwind output wraps that exact same value as an arbitrary-value utility — bg-[...] — with spaces converted to underscores the way Tailwind's syntax requires, so it works as a class name immediately without adding anything to a config file. SVG export is different in kind, not just format: it generates real <linearGradient> or <radialGradient> markup for use inside an actual SVG document, converting the CSS angle into the matching coordinate geometry. It's deliberately unavailable for conic gradients specifically, because SVG has no conic gradient primitive at all — generating markup that claims to reproduce one would just be wrong, so that option is disabled rather than producing an inaccurate result.

Which format actually matters depends entirely on where the gradient is headed next. A value being handed to a designer or stored in a design-token JSON file is best kept as plain CSS, since that's the most universally portable form. A component built with Tailwind utility classes benefits from the ready-made class string, skipping a trip through a separate stylesheet entirely. And an icon, logo, or standalone graphic that needs to travel as a single file — independent of any page's CSS — is exactly the case SVG export exists for.

A Design System's Gradient Token, End to End

The usual path: start from a preset close to the intended mood, adjust the stops and angle against the live preview, and turn on Smooth Interpolation the moment two very different hues are involved — this is the step most people skip and then wonder why the middle of their gradient looks slightly dirty. Once it's right, the Auto Contrast reading decides whether it's safe to lay a heading directly on top of it or whether it needs a text shadow, an overlay, or a solid color fallback in the busiest section instead. If the gradient is going into a component library's token set alongside other color definitions, the CSS or Tailwind export drops straight in; if it's destined for an icon or illustration file instead of a page background, the SVG export produces markup that's already correctly positioned rather than something that needs hand adjustment afterward.

Frequently Asked Questions