CSS Function
conic-gradient()
The conic-gradient() function creates a gradient that sweeps around a center point, useful for pie charts and color wheels.
Syntax
conic-gradient([from angle] [at position,] color-stop [, color-stop]+)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| from angle | angle | No | Starting angle of the gradient (default: 0deg = top) |
| at position | position | No | Center point of the gradient (default: center) |
| color-stop | color [angle] | Yes | A color and optional stop angle (degrees or percentages) |
Examples
Color wheel
Full hue spectrum color wheel.
css
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);Pie chart
A simple 40% pie chart.
css
background: conic-gradient(#3b82f6 0% 40%, #e5e7eb 40% 100%);Tailwind arbitrary value
Conic gradient in a Tailwind circular element.
html
<div class="bg-[conic-gradient(from_90deg,_#3b82f6,_#8b5cf6,_#3b82f6)] rounded-full w-24 h-24"></div>Browser Support
✓
Chrome
v69++
✓
Firefox
v83++
✓
Safari
v12.1++
✓
Edge
v79++
✓
Opera
v56++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[conic-gradient(...)]Frequently Asked Questions
How do I create a smooth color wheel?▼
List all primary hues and repeat the first color at the end: conic-gradient(red, yellow, lime, aqua, blue, magenta, red).
Can I use conic-gradient for loading spinners?▼
Yes. A common pattern is conic-gradient(transparent, currentColor) with border-radius: 50% and a mask or clip-path to create a circular spinner.
Explore CSS Color Tools
Try our free tools to work with conic-gradient() and other CSS color functions.
Open Tools