What Are CSS Gradients?
CSS gradients let you display smooth transitions between two or more colors — entirely in code, without image files. They are rendered by the browser as backgrounds, which means they scale perfectly at any resolution, load instantly, and add zero HTTP requests to your page.
CSS supports three main types of gradients: linear, radial, and conic. Each type also has a repeating variant. This guide covers every type with practical examples you can copy and adapt for your own projects.
Linear Gradients
Linear gradients transition colors along a straight line — top to bottom, left to right, diagonally, or at any angle you specify. The basic syntax is:
background: linear-gradient(direction, color1, color2, ...);Direction Keywords
You can define the gradient direction using keywords or angles:
/* Top to bottom (default) */
background: linear-gradient(to bottom, #667eea, #764ba2);
/* Left to right */
background: linear-gradient(to right, #f093fb, #f5576c);
/* Diagonal */
background: linear-gradient(to bottom right, #4facfe, #00f2fe);
/* Using angles (0deg = bottom-to-top, 90deg = left-to-right) */
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(45deg, #ff9a9e, #fecfef);Color Stops
Color stops let you control exactly where each color appears along the gradient line. Without stops, colors are distributed evenly. With stops, you have precise control:
/* Even distribution (default) */
background: linear-gradient(to right, red, yellow, green);
/* Custom color stop positions */
background: linear-gradient(to right, red 0%, yellow 30%, green 100%);
/* Hard color stop (sharp transition, no blend) */
background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);
/* Multi-color with specific positions */
background: linear-gradient(
90deg,
#ff6b6b 0%,
#feca57 25%,
#48dbfb 50%,
#ff9ff3 75%,
#54a0ff 100%
);To create a hard stripe effect with no blending, set two adjacent color stops to the same position. For example, red 50%, blue 50% creates a sharp split with no gradient transition between the two colors.
Radial Gradients
Radial gradients radiate outward from a center point, creating circular or elliptical color transitions. They are perfect for spotlight effects, glowing elements, and organic backgrounds.
/* Basic radial gradient (center, ellipse by default) */
background: radial-gradient(#667eea, #764ba2);
/* Circular shape */
background: radial-gradient(circle, #667eea, #764ba2);
/* Positioned center point */
background: radial-gradient(circle at top left, #667eea, #764ba2);
background: radial-gradient(circle at 30% 70%, #f093fb, #f5576c);
/* Sized radial gradient */
background: radial-gradient(circle closest-side, #4facfe, #00f2fe);
background: radial-gradient(ellipse farthest-corner, #ff9a9e, #fecfef);Radial Gradient Sizing Keywords
| Keyword | Description |
|---|---|
closest-side | Gradient ends at the closest side of the box |
closest-corner | Gradient ends at the closest corner |
farthest-side | Gradient ends at the farthest side |
farthest-corner | Default — gradient ends at the farthest corner |
Conic Gradients
Conic gradients rotate colors around a center point, like a color wheel or pie chart. They are the newest gradient type in CSS and enable effects that were previously impossible without images.
/* Basic conic gradient (color wheel) */
background: conic-gradient(red, yellow, green, blue, red);
/* Pie chart effect */
background: conic-gradient(
#3b82f6 0deg 120deg,
#ef4444 120deg 210deg,
#22c55e 210deg 360deg
);
/* Starting angle and position */
background: conic-gradient(from 45deg at 50% 50%, #667eea, #764ba2);
/* Checkerboard pattern */
background: conic-gradient(
#e5e7eb 0.25turn,
#fff 0.25turn 0.5turn,
#e5e7eb 0.5turn 0.75turn,
#fff 0.75turn
);
background-size: 40px 40px;Conic gradients use angles (degrees or turns) instead of positions along a line. The angle wraps around a full 360° circle from the center point. You can specify the starting angle with from Xdeg and the center position with at X% Y%.
Repeating Gradients
Each gradient type has a repeating variant that tiles the gradient pattern across the element. This is powerful for creating stripes, patterns, and textured backgrounds:
/* Repeating linear stripes */
background: repeating-linear-gradient(
45deg,
#3b82f6,
#3b82f6 10px,
#1e40af 10px,
#1e40af 20px
);
/* Repeating radial rings */
background: repeating-radial-gradient(
circle,
#667eea 0px,
#667eea 10px,
#764ba2 10px,
#764ba2 20px
);
/* Repeating conic segments (starburst) */
background: repeating-conic-gradient(
#3b82f6 0deg 15deg,
#93c5fd 15deg 30deg
);Common Gradient Patterns
By combining repeating gradients and layering multiple backgrounds, you can create sophisticated patterns purely in CSS:
/* Diagonal stripes */
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
rgba(0, 0, 0, 0.05) 10px,
rgba(0, 0, 0, 0.05) 20px
);
/* Polka dots using radial gradient */
background: radial-gradient(circle, #3b82f6 8px, transparent 8px);
background-size: 40px 40px;
/* Grid lines */
background:
linear-gradient(to right, #e5e7eb 1px, transparent 1px),
linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
background-size: 20px 20px;Layering Multiple Gradients
CSS allows you to stack multiple gradient backgrounds on a single element. Combined with transparency, this unlocks complex visual effects:
/* Layered mesh gradient effect */
background:
radial-gradient(at 20% 80%, rgba(59, 130, 246, 0.6) 0%, transparent 50%),
radial-gradient(at 80% 20%, rgba(168, 85, 247, 0.6) 0%, transparent 50%),
radial-gradient(at 50% 50%, rgba(236, 72, 153, 0.4) 0%, transparent 60%),
linear-gradient(135deg, #0f172a, #1e293b);
/* Gradient with texture overlay */
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 255, 255, 0.03) 2px,
rgba(255, 255, 255, 0.03) 4px
),
linear-gradient(135deg, #667eea, #764ba2);Complex layered gradients with many color stops can impact rendering performance on lower-powered devices, especially when applied to large areas or animated with CSS transitions. Test on mobile devices and consider simplifying if you notice frame drops.
Gradient Syntax Reference
| Property | Syntax | Example |
|---|---|---|
| Linear | linear-gradient(angle, stops) | linear-gradient(90deg, red, blue) |
| Radial | radial-gradient(shape size at pos, stops) | radial-gradient(circle at center, red, blue) |
| Conic | conic-gradient(from angle at pos, stops) | conic-gradient(from 0deg, red, blue) |
| Repeating Linear | repeating-linear-gradient(...) | repeating-linear-gradient(45deg, red 0 10px, blue 10px 20px) |
| Repeating Radial | repeating-radial-gradient(...) | repeating-radial-gradient(circle, red 0 10px, blue 10px 20px) |
| Repeating Conic | repeating-conic-gradient(...) | repeating-conic-gradient(red 0deg 15deg, blue 15deg 30deg) |
Browser Support and Fallbacks
Linear and radial gradients have had universal browser support since 2015. Conic gradients reached full support across Chrome, Firefox, Safari, and Edge by 2022. In 2026, you can use all three types without vendor prefixes in any modern browser.
For the rare case of legacy browser support, always provide a solid color fallback:
/* Fallback pattern */
.element {
background: #667eea; /* Fallback solid color */
background: linear-gradient(135deg, #667eea, #764ba2);
}🎯 Key Takeaways
- CSS supports three gradient types: linear, radial, and conic — each with a repeating variant
- Linear gradients use angles or direction keywords; radial gradients use shape and position; conic gradients use angles around a center point
- Color stops give you precise control over where colors appear and transition
- Hard color stops (same position for two colors) create sharp stripes with no blending
- Layer multiple gradients with transparency for complex mesh and texture effects
- All gradient types have full browser support in 2026 — no vendor prefixes needed
- Always provide a solid-color fallback for maximum compatibility
Conclusion
CSS gradients are one of the most powerful yet underused tools in a developer's visual toolkit. They load instantly, scale to any resolution, and can create effects ranging from simple two-color fades to intricate patterns and mesh-like backgrounds — all without a single image file.
Start with the basics — a linear gradient on a hero section or button — and experiment from there. Once you understand color stops, angles, and layering, you will find yourself reaching for CSS gradients instead of Photoshop far more often.