Tools
CSS Gradient Generator
This CSS gradient generator builds linear, radial, and conic gradients from color stops you edit in the browser. The output uses standard CSS syntax, with hex stop colors and percentage positions. Modern browsers can also interpolate stops in the OKLCH color space for smoother blends, covered below.
Default browser interpolation. Can produce muddy midpoints between distant hues.
background: linear-gradient(135deg, #FDE68A 0%, #D97757 50%, #1F1B16 100%);:root {
--gradient-custom: linear-gradient(135deg, #FDE68A 0%, #D97757 50%, #1F1B16 100%);
}
.gradient-custom {
background-image: var(--gradient-custom);
}<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
<defs>
<linearGradient id="g" x1="14.64%" y1="14.64%" x2="85.36%" y2="85.36%">
<stop offset="0.000" stop-color="#FDE68A" />
<stop offset="0.500" stop-color="#D97757" />
<stop offset="1.000" stop-color="#1F1B16" />
</linearGradient>
</defs>
<rect width="800" height="400" fill="url(#g)" />
</svg>Curated Gradient Library
12 presets
Aurora Borealis
A deep aurora gradient from midnight to teal.
Mediterranean Sunset
A warm coral-to-gold sunset gradient.
Mint Fog
A pale mint gradient for soft surfaces.
Plasma Violet
A vivid plasma gradient from violet to amber.
Ink Bloom
A radial ink bloom from indigo to black.
Citrine Glow
A warm citrine glow from pale yellow to amber.
Pacific Depth
A deep ocean gradient from sky blue to navy.
Terracotta Dusk
A warm terracotta dusk gradient.
Lime Sherbet
A fresh sherbet gradient from mint to yellow.
Graphite Glow
A subtle graphite gradient for premium dark UI.
Prism Conic
A conic prism gradient cycling through primary hues.
Rose Quartz Bloom
A radial rose bloom from blush to deep rose.
How CSS Gradients Work
CSS defines three gradient functions. linear-gradient() sweeps color along a straight line at a given angle, declared in degrees from the top. radial-gradient() sweeps color outward from a center point, defined by a shape and size. conic-gradient() sweeps color around a center point, like the spokes of a wheel. The W3C CSS Images Module Level 4 specification defines all three.
By default, browsers interpolate stops in the sRGB color space, which can produce muddy midpoints between saturated colors at opposite hues. The CSS Color 4 specification adds the in oklch keyword, which interpolates in the OKLCH perceptual color space for visually uniform stops. The syntax is linear-gradient(in oklch 135deg, #ff0000 0%, #0000ff 100%). Browser support is available in current Chrome, Safari, and Firefox.
Hex colors are stable across every browser, so this generator emits hex by default. To opt into OKLCH interpolation, prefix the gradient with in oklch in the angle slot. The curated library below also includes native SVG output for environments where CSS gradients are not available.
Why OKLCH Interpolation Matters
The interpolation menu is the most useful control on this page, and the default hides it. sRGB is what every browser does unless you ask for something else, and it is the reason so many gradients carry a gray or brown band in the middle. The problem is arithmetic: sRGB averages channel values, and channel averages have nothing to do with what the eye perceives.
A blue to yellow gradient proves it. Mixed in sRGB, the midpoint of #0000FF and #FFFF00 is #808080, a neutral gray. Mixed in OKLCH, the same two colors pass through #6cabc7, a teal that is the true perceptual midpoint. Red to blue is nearly as dramatic: sRGB gives #800080, a desaturated purple, where OKLCH gives #8c53a2, a violet that keeps its color.
Use OKLCH whenever the stops are far apart on the wheel. Use sRGB when they are close neighbors, like the subtle Mint Fog pair, because the difference is invisible there and the syntax stays simplest. The helper text under the menu explains each option as you switch.
The Three Modes and When to Use Them
Linear gradients sweep along a straight line at the angle you set, and they are the workhorse: page backgrounds, section dividers, button fills, and hero washes. Mediterranean Sunset and Pacific Depth are linear, and most marketing sites never need another mode.
Radial gradients sweep outward from a center, which makes them the right choice for glows, spotlight effects, and anything that should feel lit from within. Ink Bloom and Rose Quartz Bloom use radial mode to put the brightest point where the eye should land first.
Conic gradients rotate around a center like clock hands, and browsers treat them as a single image that can sit behind content. Use them for color wheels, loading rings, and the occasional decorative accent; Prism Conic is the example in the library. One caveat: SVG has no native conic primitive, so the SVG export maps a conic gradient to a linear approximation.
Working with Color Stops
Each stop is a color plus a position. Two stops give the cleanest sweep, three handle a highlight in the middle, and the tool allows up to eight when a multi-tone surface calls for it. Positions snap to a percentage slider, and stops render in position order no matter the order you add them.
More stops are not automatically better. Every extra stop is a decision the eye has to parse, and wide gradients with many stops start to look busy behind text. A good default is two stops for large surfaces and three when you need a midtone. The hex colors stay stable across every browser, which is why the CSS output always emits hex; the interpolation space is the only thing that changes how the blend looks.
Pick a Gradient by Mood
The curated library covers the moods a real interface needs.
- Calm and cool. Aurora Borealis, Mint Fog, and Pacific Depth run from deep teal to pale mint, at home on SaaS heroes and soft surfaces.
- Warm and bold. Mediterranean Sunset, Citrine Glow, Terracotta Dusk, and Lime Sherbet bring the heat for landing pages and playful brands.
- Dark and premium. Ink Bloom and Graphite Glow stay close to black, for premium dark interfaces that want depth without noise.
- Playful and electric. Plasma Violet and Prism Conic push saturated hues across the full wheel, best saved for accents and creative product work.
- Soft and elegant. Rose Quartz Bloom blends blush into deep rose for beauty, wedding, and personal-brand sites.
From Gradient to Production
The output panel gives you three ways to ship the same gradient. The CSS block drops into any stylesheet as a background declaration. The Tailwind and CSS variable output defines it once as a custom property. The SVG panel generates a standalone file you can download, useful for emails and non-CSS environments. Conic gradients are the one exception: SVG cannot express them natively, so the export falls back to a linear approximation.
Around the generator sit the tools that make a gradient part of a system. The color palette generator supplies solid colors that match the stops, and the brand kit folds a gradient into the same token export as your palette and type scale. The typography playground previews how the gradient reads behind real text. And when text does sit on a gradient, verify the color against the darkest stop with the WCAG contrast checker, because a gradient has no single background color to test against.
Frequently Asked Questions
What Is an OKLCH Gradient?
An OKLCH gradient is a gradient whose color stops are blended in the perceptual OKLCH color space instead of sRGB. The result keeps its saturation across the whole sweep, which matters when the stops are far apart on the color wheel. The tool exposes this as an interpolation option, and the CSS equivalent is the in oklch keyword.
Why Does My Gradient Look Muddy?
Because sRGB averages channel values, and the average of two saturated colors is often a desaturated one. Blue to yellow in sRGB passes through literal gray at the midpoint. Switch the interpolation to OKLCH and the same stops keep their color.
Can I Put Text on a Gradient?
Yes, but treat it like text on an image. A gradient has no single background color, so check your text color against the darkest or lightest stop where the text sits, and use the contrast checker to confirm the pair clears AA.
Which Mode Should I Pick?
Linear for most surfaces, radial when you want a glow or spotlight, conic for color wheels and loading rings. Start linear and switch only when the design asks for it.
Related Tools
Gradients pair naturally with solid palettes, the live playground, and the brand kit. Pull matching solid colors from the palette browser, test the gradient on a real layout, or export the gradient alongside the rest of your design tokens.