Skip to main content

CSS gradient generator

Pick two to five colors, choose linear, radial or conic, and set the angle. The CSS updates as you go, and the link in your address bar always opens this exact gradient.

135°

  • Color 1 · Blue Violet

  • Color 2 · Deep Pink

  • Color 3 · Marigold

Tip: paste a list of hex codes anywhere here to check them all at once.

Make a mesh gradient from these colors Check text contrast on them

How a CSS gradient works

A CSS gradient is an image the browser draws from a list of colors, with no file to download. It goes in background-image (or the background shorthand), so it scales to any element without blurring. The generator above writes the three kinds:

  • Linear blends along a straight line. The angle is measured clockwise from the top: 0deg runs bottom to top, 90deg left to right, and 135deg (the default here) from the top-left corner down to the bottom-right.
  • Radial spreads out from a point, here the center, in a circle. It suits spotlights and soft glows behind a heading.
  • Conic sweeps around a point like a color wheel. The generator repeats the first color at the end so the sweep closes without a hard seam.

Avoiding the gray middle

Browsers blend gradient colors in sRGB by default, which takes a straight line through the color cube. Between two colors that sit far apart on the color wheel, such as blue and yellow, that line passes close to gray, and the middle of the gradient turns muddy. Modern browsers can interpolate in a perceptual space instead: linear-gradient(in oklch 135deg, #7C3AED, #EC4899, #F59E0B) keeps the chroma up all the way across. Compare the two strips below, built from your colors:

sRGB
OKLCH

The in oklch syntax works in every current major browser; older ones ignore the whole declaration, so put a plain gradient on the line before it as a fallback. Adding a third color between two distant ones is the other fix, and works everywhere.

Using the code

The CSS tab gives a ready background declaration. The Tailwind v4 tab gives the colors as @theme variables, which you can combine with Tailwind's bg-linear-* utilities, and SVG and PNG downloads give the colors as swatches for a design file. Put text on a gradient only when it passes contrast against every color it crosses; the contrast checker tests all of them at once.

Ready-made gradients

Prefer to start from something finished? Browse all free CSS gradients, the softer mesh gradients, or gradients by color: