← Back to functions

CSS Function

conic-gradient()

Gradients

Creates a gradient that rotates around a center point, like a color wheel.

Syntax

conic-gradient(from angle, color1, color2, ...)

Example

background: conic-gradient(from 0deg, #3dffa0, #0d0d0d, #3dffa0);

Common use cases

  • Pie charts in pure CSS
  • Color wheels and pickers
  • Animated spinning gradients

Practical developer insight

conic-gradient() is perfect for pie charts — each color stop percentage maps directly to a slice of the circle. Combine with border-radius: 50% for a round chart.

Related

linear-gradient()radial-gradient()background-color