Stunning conic gradients with the magic of CSS

What are conic gradients?

Conic gradients are a type of gradient that produces smooth colour transitions around a central point, forming a circular pattern. They’re perfect for creating visuals like pie charts, spinners, and other circular designs.

How to use conic gradients

• from <angle>: Optional, sets where the gradient starts (default is the top)
• <color-stop>: The colours and points at which they change

background: conic-gradient(from <angle>, <color-stop>, <color-stop>);

Example 1: Simple gradient

Here’s a simple conic gradient that transitions between two colours:

.cognic-gradient {
  background: conic-gradient(from 45deg at 50% 50%, #ffe8a3 0%, #ff78cf 100%);
  height: 360px;
  width: 360px;
}

Example 2: Pie chart

You can use conic gradients to make pie chart-like designs by setting exact angles.

The circular effect is achieved by using a border-radius of 50%.

The angles divide the circle into two slices.

.conic-gradient {
  background: conic-gradient(#ffe8a3 90deg, #ff78cf 90deg);
  border-radius: 50%;
  height: 360px;
  width: 360px;
}

Example 3: Conic gradient border

Using the conic gradient property on the <border-image-source> tag allows us to apply this effect to the border.

.conic-gradient {
  border: 32px solid #ff78cf; /* fallback border colour */
  border-image-source: conic-gradient(from 45deg, #ffe8a3, #ff78cf, #ffe8a3);
  border-image-slice: 1;
  height: 360px;
  width: 360px;
}

Conic gradients are a fun and easy way to create circular colour transitions in CSS. They’re great for creative designs like pie charts and spinners.