Cool CSS effects: Conic gradients

CSS gradients are a powerful concept. One example of that is conic-gradient function, which rotates the color transitions from the center of the element.

The simplest way to use it is to just specify the colors we want to include in the gradient (we can specify as many colors as we want):

<div class="test"></div>

<style>
.test {
  background: conic-gradient(red, orange, yellow, green);
  height: 100px;  
}
</style>

Result (preview):

Stop positions

We can specify the the stop position for each color (either in degrees (0deg-360deg) or percentages (0%-100%)):

<div class="test"></div>

<style>
.test {
  background: conic-gradient(red 10deg, orange 50deg, yellow 160deg, green 290deg);
  height: 100px;  
}
</style>

Result (preview):

Pie-charts (multi-position color stops)

We can specify multiple positions for colors stops to create Pie-charts:

<div class="test"></div>

<style>
.test {
  background: conic-gradient(red 36deg, orange 36deg 170deg, green 170deg);
  border-radius: 50%;
  height: 150px;    
  width: 150px;
}
</style>

Result (preview):

Angle (from)

By default, rotations start at 0 degrees, but we can change that by specifying the angle as the first argument (from <angle>):

<div class="test"></div>

<style>
.test {
  background: conic-gradient(from 180deg, red, orange, yellow, green);
  height: 100px;  
}
</style>

Result (preview):

Position (at)

We can specify the position for the center of the gradient by using at <position> as the first argument:

<div class="test"></div>

<style>
.test {
  background: conic-gradient(at 25% 75%, red, orange, yellow, green);
  height: 100px;  
}
</style>

Result (preview):

The syntax is similar to positioning other CSS elements (you can specify the positions in pixels or percentages).

Browser support

conic-gradient function is well supported in all modern browsers.

Ask me anything / Suggestions