Complete CSS Gradient Guide: From Linear to Conic

March 2026 · 7 min read

CSS gradients are among the most commonly used visual effects in modern web design. They allow you to create smooth transitions between two or more colors without using images. This guide covers all three CSS gradient types in detail.

Linear Gradients

linear-gradient() is the most commonly used gradient type, creating color transitions along a straight line.

Basic syntax: linear-gradient(direction, color-stop1, color-stop2, ...)

Direction — Use angles (e.g., 45deg) or keywords (e.g., to right)
Color stops — Specify colors and their positions (e.g., red 0%, blue 100%)

Radial Gradients

radial-gradient() radiates outward from a center point, creating circular or elliptical gradient effects.

Parameter	Options	Description
Shape	circle, ellipse	Circle or ellipse
Size	closest-side, farthest-corner, etc.	Gradient ending boundary
Position	at center, at top left, etc.	Gradient center point

Conic Gradients

conic-gradient() creates gradients by rotating around a center point, producing effects similar to color wheels or pie charts.

Pro Tip: Conic gradients are perfect for creating pie charts, color wheels, and progress rings without SVG or Canvas.

Repeating Gradients

CSS also provides three repeating gradient functions:

repeating-linear-gradient() — Repeating linear gradients
repeating-radial-gradient() — Repeating radial gradients
repeating-conic-gradient() — Repeating conic gradients

Multiple Gradients

CSS allows stacking multiple gradients on a single element, separated by commas. Combined with transparency, this creates rich visual effects.

Browser Support

CSS gradients enjoy excellent support across all modern browsers. Over 97% of browsers support linear and radial gradients, and conic gradients have surpassed 95% support.

Generate Gradients Easily

Try the CSS Gradient Generator →

Conclusion

CSS gradients are a powerful and flexible visual tool. Mastering all three gradient types will make your web designs richer and more visually appealing.

References

W3C. "CSS Images Module Level 3 — Gradients." W3C Candidate Recommendation. https://www.w3.org/TR/css-images-3/#gradients
Mozilla Developer Network. "Using CSS gradients." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients
W3C. "CSS Images Module Level 4." W3C Working Draft. https://www.w3.org/TR/css-images-4/