Gradient generator

What this gradient generator does

Compose a CSS gradient visually and copy the exact background: …; declaration. It supports the three gradient functions — linear, radial and conic — any number of color stops with explicit percentage positions, an angle slider for linear and conic, and an OKLCH interpolation toggle that adds the in oklch hint so the browser blends through a perceptual color space. The output is plain CSS with no vendor prefixes and no dependencies.

How to use it

1. Pick a Type: linear, radial or conic.
2. For linear and conic, drag Angle (0–360deg). Radial gradients have no angle; the tool uses circle from the center.
3. Edit the Color stops: each row has a picker, a text field (any CSS color) and a position in percent. Click + Add stop for more, or ✕ to remove one (minimum two).
4. Tick OKLCH interpolation if the midpoint looks dull.
5. Watch the preview and copy the declaration from the result box.

Output reference

Type	Generated value	Notes
Linear	linear-gradient(90deg, #6b46ff 0%, #00b8d4 100%)	Angle is the direction of travel
Radial	radial-gradient(circle, #6b46ff 0%, #00b8d4 100%)	Circle from the center; edit to ellipse or add at 30% 40% by hand
Conic	conic-gradient(from 90deg, #6b46ff 0%, #00b8d4 100%)	from sets where the sweep starts
With OKLCH	linear-gradient(90deg in oklch, …)	Hint goes after the angle, before the stops

Stops are always emitted sorted by position, so you can enter them in any order.

sRGB vs OKLCH interpolation

By default every browser interpolates gradient stops in sRGB. For colors with similar hues that is fine. For hues far apart it produces a desaturated, darker band in the middle — a purple-to-cyan gradient dips through a greyish blue, and blue-to-yellow goes almost fully grey. Why gradients look muddy walks through the math.

in oklch tells the browser to interpolate lightness, chroma and hue separately in OKLCH. Chroma stays high through the middle and lightness changes evenly, so the gradient looks the way the two end colors suggest it should. Ship it with a fallback:

.hero {
  background: linear-gradient(90deg, #6b46ff 0%, #00b8d4 100%);
  background: linear-gradient(90deg in oklch, #6b46ff 0%, #00b8d4 100%);
}

Browsers without support keep the first line. One side effect to know about: in OKLCH the hue travels by the shorter arc, so a gradient from red to blue goes through purple, never through green. If you want the long way around, add an intermediate stop.

Techniques worth copying

• Soft two-tone background: linear, 135deg, #6b46ff at 0% and #00b8d4 at 100%, OKLCH on. Lower each color’s chroma in the color converter first for a calmer look.
• Hard stripes: linear, 90deg, four stops — color A at 0% and 50%, color B at 50% and 100%. Combine with background-size for repeating patterns; see diagonal stripes.
• Pie chart or progress ring: conic from 0deg, #6b46ff at 0% and 70%, #e5e7eb at 70% and 100%. Put it on a square element with border-radius: 50%.
• Spotlight: radial, white at 0% fading to a dark color at 100%.
• Fade to transparent: current browsers interpolate with premultiplied alpha, so a transparent last stop no longer darkens the fade. Writing the same color with alpha 0, such as rgb(107 70 255 / 0), is still the safest choice for older engines.

Performance notes

Gradients are painted, not composited, so an animated background-image repaints every frame. Animate background-position or a transform on a larger-than-container gradient instead — see the animated gradient background snippet, which does exactly that.

Related tools and snippets

• Color mixer — inspect the exact midpoint of two stops in OKLCH, RGB or HSL.
• Palette generator — pick analogous colors that make naturally smooth gradients.
• Gradient text snippet — apply your gradient to text with background-clip: text.
• Gradient border snippet — a gradient border using border-image or a padding-box trick.
• Cubic-bezier generator — easing curves for animating gradient position.