CSS Gradients Explained: Linear, Radial & Conic
How CSS gradients work under the hood, the difference between linear, radial, and conic gradients, and how to use them without hurting performance.
6 min read
Last updated 2026-07-19
Luis Avila
CSS Gradients Explained: Linear, Radial & Conic explains CSS gradients from the concepts that matter most to the decisions you make in practice. It focuses on how the technology works, where it fits, the tradeoffs to check, and how to avoid results that look correct but fail in a real workflow.
What will this guide cover?
- What is a CSS gradient?
- Linear, radial, and conic gradients
- Color stops and interpolation
- Practical uses
- Code example
- Performance and maintainability
- Common mistakes
What is a CSS gradient?
A CSS gradient is a generated image that blends colors along a line, circle, ellipse, or angular sweep. Because the browser renders it from color stops, it scales without a separate image file. Gradients can be used anywhere a CSS image is accepted, including backgrounds, masks, and borders through supporting techniques.
Linear, radial, and conic gradients
Linear gradients transition along a direction, radial gradients spread from a center point, and conic gradients rotate colors around a center. Color stops control where each color begins or reaches a specific position. Repeating variants create stripes, rings, or angular patterns.
Color stops and interpolation
A stop can include a color and position, such as #2563eb 0% or transparent 70%. Missing positions are distributed automatically. Browser interpolation can produce muddy middle colors when combining distant hues, so adding an intermediate stop may give more intentional results.
Practical uses
Gradients can add depth to hero sections, show progress or heat ranges, create overlays that improve text contrast, and build decorative patterns without extra assets. Functional gradients should still meet contrast requirements and should not be the only way a state or value is communicated.
Code example
A readable overlay can use background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.75)), url(image.jpg);. The gradient darkens the lower area while leaving the top visible. Test the text against different portions of the underlying image.
Performance and maintainability
Prefer a small number of stops and reuse design tokens or CSS custom properties for brand colors. Complex layered gradients can be difficult to maintain and may be expensive to animate. Animate opacity or transform on a pseudo-element instead of continuously recalculating many gradient stops when possible.
Common mistakes
Too many saturated colors can distract from content, and subtle gradients may show banding on some displays. Hard-coded stop positions can break when component dimensions change. Always provide a solid fallback color and check forced-colors or high-contrast modes for critical interfaces.
Frequently Asked Questions
A gradient is a generated image that blends between two or more color stops. It can be used anywhere CSS accepts an image, such as backgrounds, masks, and borders through supporting techniques.
A linear gradient transitions along a line and angle. A radial gradient expands from a center point in a circular or elliptical shape.
Stops can use percentages, lengths, or omitted positions. The browser distributes omitted stops between explicit positions and clamps stops that would otherwise move backward.
Banding can appear on large subtle gradients because of limited color precision, display characteristics, or compression. Adding slight noise, adjusting colors, or reducing the transition area can help.
Yes. Contrast may vary across the background. Test the lowest-contrast region, add an overlay when needed, and do not assume one text color remains readable everywhere.
Basic static gradients are generally efficient. Large animated gradients, filters, and frequent background-position changes can increase painting cost, especially on mobile devices.
Set a solid background color before the gradient declaration. Browsers that do not support the gradient keep the earlier color.