CSS Gradients: Angles, Color Stops, and Interpolation Explained

CSS gradients replaced image-based backgrounds over a decade ago, yet many developers still reach for a generator rather than writing them from memory. The syntax is more nuanced than it appears — angles work differently than you might expect, color interpolation has changed with CSS Color Level 4, and radial gradients have a geometry system that catches even experienced developers off guard.

Linear Gradients: Angles and Direction Keywords

The linear-gradient() function accepts either an angle or a direction keyword. Angles in CSS gradients follow a compass model: 0deg points up, 90deg points right, 180deg points down. This is the opposite of the standard mathematical convention where 0deg points right.

Direction keywords map to specific angles: to top = 0deg, to right = 90deg, to bottom = 180deg (the default), to left = 270deg. Corner keywords like to bottom right calculate the angle dynamically based on the element's aspect ratio — they do not always equal 135deg.

The gradient line extends through the center of the element at the specified angle, and its length is calculated so that the corner points of the element touch the gradient line's perpendicular. This means the actual gradient area is always larger than the element itself.

Radial Gradients: Shape, Size, and Position

Radial gradients radiate from a center point outward. The radial-gradient() function accepts a shape (circle or ellipse), a size keyword, and a position.

The four size keywords control how far the gradient extends:

• closest-side: the gradient ends at the nearest edge of the element.
• farthest-side: extends to the farthest edge.
• closest-corner: ends at the nearest corner.
• farthest-corner (default): extends to the farthest corner, ensuring the gradient covers the entire element.

A common mistake is using circle on a rectangular element and expecting it to fill the entire background. Since a circle maintains equal radii, the gradient will leave uncovered corners on non-square elements unless combined with the right size keyword.

Conic Gradients: The Newest Addition

Conic gradients (conic-gradient()), supported since 2020 in all major browsers, sweep color transitions around a center point rather than along a line or outward from a point. They are ideal for pie charts, color wheels, and angular patterns.

The syntax accepts a starting angle with from and a position with at: conic-gradient(from 45deg at 50% 50%, red, blue). When combined with border-radius: 50%, conic gradients produce smooth color wheels without JavaScript or SVG.

Color Stops and Interpolation

Each color stop can specify a position as a percentage or length value. When positions are omitted, browsers distribute stops evenly. You can also specify two positions for a single color to create hard color bands: red 0% 50%, blue 50% 100% produces a sharp transition with no blending.

CSS Color Level 4 introduced color-mix() and the ability to specify color interpolation in different color spaces. By default, gradients interpolate in sRGB, which can produce muddy midpoints — particularly between complementary colors. Using in oklch produces perceptually uniform transitions: linear-gradient(in oklch, red, blue). Browser support for this syntax reached 90%+ in 2025.

Performance and Best Practices

CSS gradients are rendered by the browser's compositing engine and are generally GPU-accelerated. They add zero HTTP requests compared to gradient images, reducing page load time. Some guidelines:

• Prefer gradients over images for simple backgrounds — they scale to any resolution without pixelation and add zero network weight.
• Avoid excessive color stops — more than 6-8 stops rarely improve visual quality and increase rendering complexity.
• Use oklch interpolation for gradients between saturated colors to avoid the muddy-middle problem.
• Test on mobile — complex gradients with many stops can cause visible banding on lower-quality mobile displays.

Key Takeaways

• CSS gradient angles use compass direction (0deg = up), not math convention (0deg = right).
• Radial gradient size keywords control coverage — farthest-corner is the default and fills the entire element.
• Conic gradients sweep around a center point and work well for pie charts and color wheels.
• Use in oklch color interpolation for perceptually smooth transitions between saturated colors.
• Gradients add zero network overhead and scale to any resolution, making them superior to image backgrounds for simple patterns.

Build your next gradient visually with our CSS Gradient Generator — pick colors, adjust angles, and copy production-ready CSS in seconds.