Stunning conic gradients with the magic of CSS

Tags

  • CSS
  • HTML
Posted on
8 October 2024
Posted in
Tutorial

Share this article on

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;
}
Conic gradient effect using two colours
Conic gradient effect using two colours

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;
}
Pie chart using conic gradient
Pie chart using conic gradient

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.

Preview for “Stunning conic gradients with the magic of CSS”

HTML for “Stunning conic gradients with the magic of CSS”

<div class="conic-gradient">
  <h2>Conic Gradient</h2>
</div>

CSS for “Stunning conic gradients with the magic of CSS”

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