CSS Gradient

Why CSS gradients are important for developers

A CSS gradient is a smooth blend between two or more colors that the browser draws for you, with no image file required. Because it is generated in code it stays razor-sharp at any size, adds zero network weight, and can be animated or themed on the fly. Our CSS Gradient tool lets you build one visually and copy the exact CSS, but here is how gradients actually work so you can tweak the output by hand.

What is a CSS gradient?

Technically a gradient is an image value, so it lives wherever CSS expects an image, most often background or background-image. You give it a list of color stops and the browser fills the space by interpolating between them. The same color stops can be laid out in a straight line, radiating from a point, or swept around a center, which gives you the three gradient families below.

What are the differences between linear, radial and conic gradients?

Linear gradient

A linear gradient blends colors along a straight line. You set the direction with an angle (0deg points up, 90deg points right) or a keyword like to bottom right. It is the workhorse for page backgrounds, buttons and hero sections.

background: linear-gradient(90deg, #4F46E5 0%, #06B6D4 100%);

Radial gradient

A radial gradient spreads outward from a center point in a circle or ellipse. You can control its shape, how far it reaches (closest-side through farthest-corner) and where the center sits, which makes it ideal for spotlights, glows and soft vignettes.

background: radial-gradient(circle at 50% 40%, #4F46E5, #06B6D4);

Conic gradient

A conic gradient sweeps colors around a center like the hands of a clock. Set a start angle with from, and use hard stops to build pie charts, color wheels and pinwheel effects.

background: conic-gradient(from 0deg, #4F46E5, #06B6D4, #4F46E5);

How CSS gradient color stops work

Each color in a gradient is a color stop, and you can pin it to a position so you control exactly where the blend happens. With no positions the stops spread out evenly. Add percentages and you can crowd colors together or leave wide bands of solid color.

• Give a stop a single position, like #06B6D4 70%, to move where it lands.
• Give a stop two positions to create a hard edge with no blend, perfect for stripes.
• Drop a bare percentage between two colors to set the midpoint, biasing the blend toward one side.

/* a crisp three-band stripe, no blending */
background: linear-gradient(90deg,
  #4F46E5 0% 33%,
  #06B6D4 33% 66%,
  #22C55E 66% 100%);

Why interpolate a gradient in OKLCH?

By default browsers blend gradients in sRGB, the classic screen color space. The trouble is that mixing two vivid colors in sRGB often dips through a muddy grey in the middle, think blue to yellow turning murky. Newer CSS lets you choose a better color space with an interpolation hint such as in oklch. OKLCH and OKLab are tuned to human vision, so mid-tones stay bright and the transition looks even. The hue-path option (shorter or longer) decides which way around the color wheel a hue sweep travels.

background: linear-gradient(90deg in oklch, #4F46E5, #06B6D4);

Layering a gradient over an image or background

Because a gradient is an image value you can stack several, separated by commas, with the first one painted on top. A translucent gradient over a photo is the classic way to keep overlaid text readable.

background:
  linear-gradient(rgba(15,17,23,.65), rgba(15,17,23,.65)),
  url("photo.jpg") center / cover;

Why older browsers cannot support every gradient

The modern browsers, Chrome, Firefox, Safari and Edge, all render CSS gradients well, and the gaps come down to age. Basic linear and radial gradients have shipped since around 2013, conic gradients landed several years later, and the OKLCH color-interpolation hint is newer still. That is why an old engine such as Internet Explorer drops parts of a gradient and falls back to a plain color.

Linear, radial and conic gradients are supported in every current browser, so they are safe to use everywhere. The newer color-interpolation hints like in oklch are only read by up-to-date browsers, so it is good practice to declare a plain solid color first as a fallback. Older engines simply ignore the line they do not understand and keep the solid color.

Numbers show the first browser version with full, unprefixed support. A dash means support arrived in that version range.

background: #4F46E5; /* fallback */
background: linear-gradient(90deg in oklch, #4F46E5, #06B6D4);

Frequently asked questions