Building a gradient

Pick a shape. Linear blends along a straight line at the angle you set. Radial spreads out from the center in a circle. Conic sweeps around the center like a clock hand, which is useful for pie-chart effects and color wheels.
Set the colors. Each stop has a color picker, a HEX field and a position from 0 to 100%. Drag the handles on the bar under the preview to move stops by hand.
Add or remove stops. Add stop drops a new one into the widest gap, colored to match the blend at that point, so the gradient doesn't jump. You can have as many as you like, but at least two.
Choose an interpolation space (explained below), then copy the CSS, Tailwind class or SVG, or download a PNG at any size up to 8000 × 8000.

The URL updates as you work, so you can bookmark a gradient or send it to someone.

The muddy-middle problem

Blend blue #1F3FBF into yellow #F5D90A the classic way, in sRGB, and the halfway point is #8A8C65, a drab gray-olive. Each RGB channel is simply averaged, and the average of a strong blue and a strong yellow has no strong channel left.

Blending in OKLCH instead interpolates lightness, chroma and hue separately. The hue travels around the wheel from blue to yellow and the chroma stays high, so the midpoint becomes a clear teal, #00A999. OKLab is in between: it avoids the gray dip better than sRGB but cuts straight across the color space, so the middle is a soft blue-gray (#81979A for this pair).

Rules of thumb:

OKLCH for vivid blends between distant hues, such as sunsets and brand gradients.
OKLab for smooth, natural blends between similar colors, or when you don't want hues the endpoints don't contain.
sRGB when you need to match an existing design exactly, or for black-to-white ramps, where all three look much the same.

The CSS you get

With OKLCH or OKLab selected, the output has two lines:

background: linear-gradient(90deg, #1F3FBF 0%, #0066A3 12.5%, …);
background: linear-gradient(90deg in oklch, #1F3FBF 0%, #F5D90A 100%);

The second line uses the CSS Color 4 interpolation syntax, which Chrome, Edge, Safari and Firefox all support in current versions. The first line is a fallback built from pre-computed stops that imitate the same blend. Older browsers use it and ignore the line they don't understand. Delete the fallback if you only support modern browsers.

Tailwind and SVG

Tailwind: the output is an arbitrary-value class such as bg-[linear-gradient(90deg,_#1F3FBF_0%,_…)], with every space replaced by an underscore, as Tailwind requires. It works in v3 and v4.
SVG: a linearGradient or radialGradient element with the sampled stops, for icons, illustrations or email-safe images. SVG has no conic gradient, so for conic shapes use CSS or PNG.

PNG export

Type a width and height and press Download PNG for wallpapers, slide backgrounds, social images or placeholders. The canvas renderer draws the same sampled stops as the CSS fallback, so OKLCH blends look right in the file. For a phone wallpaper, try 1290 × 2796, the iPhone 15 Pro Max screen size. A 4K desktop is 3840 × 2160.

Design tips

Fewer, closer stops usually look better than many distant ones.
Hard stops: put two stops at the same position to get a sharp edge, which is useful for stripes and progress bars.
Banding: long, subtle gradients can show visible steps on 8-bit screens. A very light noise texture over the gradient hides it.
Text on gradients: check contrast at both ends and in the middle with the contrast checker. A gradient that passes at one end can fail at the other.
Metallic looks come from several stops alternating light and dark, such as gold with highlights. The gold colors collection has recipes.

To blend just two colors and see the result as paint or light, use the color mixer. To pick a starting set of colors, try the palette generator. For lightness steps of one color, use the Tailwind color generator.

FAQ

How do I make a gradient fade to transparent?

The stops here are opaque colors. To fade out, copy the CSS and change the last stop to the same color with zero alpha, for example #1F3FBF00 or rgb(31 63 191 / 0). Fading to the keyword transparent makes some older browsers pass through gray, and the zero-alpha version of your color avoids that.

Why does my gradient look different in Photoshop?

Photoshop and Figma blend in sRGB by default, like CSS without an interpolation keyword. Select sRGB here to match them.

Is the PNG compressed?

It's a standard lossless PNG. Run it through an image optimizer if it's going on a web page.