The Complete Guide to CSS Gradients (2026)

Gradients are how flat designs get depth and how brands get their signature look without a single image file. CSS gives you three kinds, linear, radial, and conic, and once you understand color stops you can build everything from a subtle button sheen to a full mesh-style background. This guide covers the syntax, the math behind the angles, and the small tricks that separate a smooth gradient from a muddy one.

Gradients are images, not colors

The first thing to internalize: a CSS gradient is a generated image, not a color value. That is why it lives on background-image (or the background shorthand), not background-color. It also means you can layer multiple gradients, combine them with real images, and size and position them like any other background.

Linear gradients

linear-gradient() blends colors along a straight line. You give it a direction followed by two or more color stops.

.hero {
  background: linear-gradient(135deg, #1B4DFF, #7B5CFF);
}

The direction can be an angle or a keyword. 0deg points up, 90deg points right, 180deg points down, and 135deg is the popular top-left to bottom-right diagonal. The keyword form, to right or to bottom left, reads more clearly when you do not need a precise angle.

• Angles run clockwise: 0deg is up, 90deg is right, not the math convention people expect
• to bottom is identical to 180deg, to right is 90deg
• Diagonal keywords like to top right always point at the corner, adjusting as the box resizes

Color stops give you control

Add a position after each color to control where it sits along the line. Positions are percentages or lengths.

/* Color holds solid until 40%, then blends to the second */
background: linear-gradient(90deg, #1B4DFF 40%, #38B6FF 100%);

Hard stops for stripes and shapes

Put two stops at the same position and the transition becomes instant, no blend. This is how you draw stripes, split backgrounds, and color blocks with a single gradient and zero extra elements.

/* Sharp two-color split down the middle */
background: linear-gradient(90deg, #1B4DFF 50%, #7B5CFF 50%);

/* Repeating diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #f1f5f9 0 12px,
  #e2e8f0 12px 24px
);

Radial gradients

radial-gradient() blends outward from a center point in a circle or ellipse. Use it for spotlights, glows, and soft vignettes.

.spotlight {
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff,
    #c7d2fe 60%,
    #1B4DFF
  );
}

The shape (circle or ellipse) comes first, then at <position> sets the center, then your color stops. circle keeps it perfectly round regardless of box dimensions; ellipse (the default) stretches to fit. Moving the center with at 30% 30% is what makes a light source feel like it is coming from a specific direction.

Conic gradients

conic-gradient() sweeps colors around a center point like a clock hand. It is what you reach for to build pie charts, color wheels, and angular accents without SVG or canvas.

/* Simple two-segment pie */
.pie {
  background: conic-gradient(#1B4DFF 0 35%, #e2e8f0 35% 100%);
  border-radius: 50%;
}

/* Full color wheel */
.wheel {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  border-radius: 50%;
}

Note the closing color in the wheel repeats the opening red, so the sweep loops seamlessly. Forgetting that gives you a visible seam where 360deg meets 0deg.

The ugly gray midpoint problem

Blend two saturated colors, say a bright blue and a bright yellow, and the middle often turns a dull gray. This happens because the browser interpolates through the sRGB color space, which dips through low-saturation territory. The modern fix is to interpolate in a better color space:

/* Interpolate through OKLCH for vivid, even blends */
background: linear-gradient(in oklch, #1B4DFF, #F59E0B);

The in oklch (or in hsl, in lch) hint tells the browser which space to blend through. OKLCH keeps perceived brightness and saturation consistent across the transition, eliminating the muddy midpoint. It is supported across all current major browsers and is the single biggest upgrade to gradient quality in years.

Layering gradients

Because gradients are background images, you can stack several with commas. Earlier layers sit on top. Semi-transparent layers let lower ones show through, which is how mesh-gradient backgrounds are faked cheaply.

.mesh {
  background:
    radial-gradient(at 20% 20%, rgba(123,92,255,0.6), transparent 50%),
    radial-gradient(at 80% 30%, rgba(56,182,255,0.6), transparent 50%),
    radial-gradient(at 50% 80%, rgba(27,77,255,0.6), transparent 50%),
    #0b1020;
}

Three soft radial glows over a dark base color produce a rich, on-trend mesh background, no image, no library, fully responsive.

Conclusion

Three functions cover everything: linear for directional blends, radial for glows and spotlights, conic for sweeps and charts. Master color stops, use hard stops for shapes, interpolate in OKLCH to keep colors vivid, and layer transparent gradients for depth. That toolkit replaces a surprising number of image assets and keeps your designs sharp at any screen size.