Conic Gradients

conic-gradient() sweeps colors around a center point, ideal for pie charts and color wheels.

Example

.pie { background: conic-gradient(#4caf50 0% 40%, #2196f3 40% 75%, #ff5722 75% 100%); border-radius: 50%; }
.wheel { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border-radius: 50%; }

CSS

Full Editor

Pro Tip

Add border-radius: 50% to a conic gradient for a pie chart with zero JavaScript.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned