CSS Gradient Complete Guide: Linear, Radial and Conic Gradients With Examples
Last updated: June 2026
What CSS Gradients Are and Why They Are Better Than Images
A CSS gradient creates a smooth transition between two or more colors using pure CSS -- no image file required. This makes gradients infinitely scalable at zero file size, easy to modify by changing a single value, GPU-accelerated for smooth rendering, and responsive without any extra work.
Gradients are used everywhere in modern web design: hero section backgrounds, button hover effects, card surfaces, text fills, overlays on photographs, loading skeletons, and decorative UI accents. Knowing how to write them correctly means you can produce any gradient effect without opening a design tool or saving an image file.
Linear Gradients
A linear gradient transitions colors along a straight line at a specified angle. It is the most commonly used gradient type.
Basic syntax
Direction options
background: linear-gradient(to right, #7C3AED, #06B6D4);
background: linear-gradient(to bottom, #7C3AED, #06B6D4);
background: linear-gradient(to bottom right, #7C3AED, #06B6D4);
/* Degree angles */
background: linear-gradient(90deg, #7C3AED, #06B6D4); /* left to right */
background: linear-gradient(180deg, #7C3AED, #06B6D4); /* top to bottom */
background: linear-gradient(135deg, #7C3AED, #06B6D4); /* diagonal */
background: linear-gradient(0deg, #7C3AED, #06B6D4); /* bottom to top */
Multiple color stops
background: linear-gradient(to right, #7C3AED, #06B6D4, #10B981);
/* With explicit positions */
background: linear-gradient(90deg,
#7C3AED 0%,
#06B6D4 50%,
#10B981 100%
);
/* Hard color stop (sharp edge, no transition) */
background: linear-gradient(to right, #7C3AED 50%, #06B6D4 50%);
Color stops can be placed at any percentage position. You can create unequal transitions by placing stops at non-even positions, or create hard edges by placing two stops at the same position.
Radial Gradients
A radial gradient radiates outward from a center point in a circular or elliptical pattern.
background: radial-gradient(circle, #7C3AED, #1e1b4b);
/* Ellipse (default shape) */
background: radial-gradient(ellipse, #7C3AED, #1e1b4b);
/* Custom center position */
background: radial-gradient(circle at 30% 40%, #7C3AED, #1e1b4b);
/* With size keywords */
background: radial-gradient(circle closest-side, #7C3AED, #1e1b4b);
background: radial-gradient(circle farthest-corner, #7C3AED, #1e1b4b);
Radial gradients are useful for spotlight effects, glowing backgrounds, and any composition where a soft burst of color from a point creates the right visual. Moving the center position (the at keyword) lets you create off-center focal points.
Conic Gradients
A conic gradient rotates colors around a center point, like a color wheel or a pie chart. Available in all modern browsers.
background: conic-gradient(#7C3AED, #06B6D4, #7C3AED);
/* With from angle */
background: conic-gradient(from 45deg, #7C3AED, #06B6D4, #10B981, #7C3AED);
/* Pie chart style (hard stops) */
background: conic-gradient(
#7C3AED 0deg 120deg,
#06B6D4 120deg 240deg,
#10B981 240deg 360deg
);
Conic gradients are excellent for pie charts (using hard color stops at specific degree values), color wheel visualizations, and radial loading indicators.
Gradient Text Effect
One of the most popular gradient techniques in 2026 is applying a gradient to text. This requires three properties working together:
background: linear-gradient(90deg, #7C3AED, #06B6D4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* fallback */
}
This clips the gradient to the text shape. All modern browsers support this technique. The -webkit- prefix is still needed for Safari. Use a solid color fallback for contexts where the gradient cannot render.
Common Gradient Patterns
Hero section overlay on image
background-image:
linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)),
url('hero-image.jpg');
background-size: cover;
}
Subtle card background
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}
Button hover gradient
.btn:hover { background: linear-gradient(135deg, #7C3AED, #06B6D4); }
Performance Considerations
CSS gradients are GPU-accelerated and rendered natively by the browser -- they are faster than any image alternative. However, gradients on elements that change frequently during animation can cause paint invalidation. For animated elements, prefer solid colors and use opacity or transform animations rather than changing the gradient itself.
Mesh gradients (multiple overlapping radial gradients) are visually stunning but computationally heavier than simple linear gradients. Test performance on lower-end mobile devices before using complex multi-layer gradient effects in high-frequency-render contexts like scroll animations.