What Can conic-gradient() Do? How to Use Circular Color Effects on the Web

If you want to divide a circle into colored sectors or create a background whose colors travel around a center, CSS conic-gradient() is worth exploring. It allows you to control angles and transitions without preparing a separate image, making it useful for circular decoration and progress indicators. This guide explains how it differs from other gradients, shows a circular display of 65% completion, and covers the checks that make the result practical to use.

conic-gradient arranges colors around a center

conic-gradient() is a CSS function that generates a gradient image with colors arranged around a central point. CSS (Cascading Style Sheets) controls a webpage’s visual appearance. While linear-gradient() transitions along a straight line and radial-gradient() spreads colors outward from a center, a conic gradient changes colors as it travels around that center.

Without a different starting angle, a conic gradient begins at the top, in the 12 o’clock direction, and proceeds clockwise. 90deg represents one-quarter of a rotation, 180deg a half turn, and 360deg a full turn. Specifying from 90deg moves the starting direction to the right.

Place color stops apart to create a smooth transition between them. Place adjacent stops at the same angle to make a sharp boundary, suitable for a solid sector. This makes conic gradients useful for circular patterns and decorative color wheels as well as simple progress visuals. Because the function returns an image value, it belongs in a property such as background-image, not background-color.

CSS example: show 65% lesson completion as a circular ring

Suppose a student has finished 13 out of 20 online lessons. That equals 65% completion, or 234 degrees of a 360-degree circle. We can color the segment from 0 to 234 degrees as completed and the remainder from 234 to 360 degrees as incomplete. The completed segment uses deep navy ■#0F172A; the remaining segment uses blue-gray ■#64748B.

<div class="lesson-progress">
  <div class="lesson-ring" role="progressbar"
       aria-label="Lesson completion"
       aria-valuemin="0" aria-valuemax="100"
       aria-valuenow="65">
    <span aria-hidden="true">65%</span>
  </div>
  <p>13 of 20 lessons completed.</p>
</div>

.lesson-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  color: rgb(30 41 59);
  background-color: rgb(255 255 255);
}
.lesson-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: rgb(100 116 139);
  background-image: conic-gradient(
    rgb(15 23 42) 0deg 234deg,
    rgb(100 116 139) 234deg 360deg
  );
}
.lesson-ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background-color: rgb(255 255 255);
}
.lesson-ring span {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  font-weight: bold;
}

The border-radius: 50% rule rounds the outside. A CSS pseudo-element called ::before overlays a smaller white ■#FFFFFF circle in the middle, making the result look like a doughnut-shaped ring. The central percentage and explanatory text appear in dark blue-gray ■#1E293B. The conic gradient itself is still a filled circular background; the middle only becomes hollow-looking because it is covered by another element.

Check the colors and keep the progress information accessible

In this example, the contrast ratio between the navy completed segment and the blue-gray remainder is approximately 3.75:1. The blue-gray track against the surrounding white background reaches approximately 4.76:1. Both exceed the 3:1 threshold of the Web Content Accessibility Guidelines (WCAG) 2.2 for meaningful non-text visual information against adjacent colors. Dark blue-gray text on white has a contrast ratio of about 14.63:1, above the 4.5:1 minimum for normal-sized text. Check the actual size and nearby colors in the finished layout, too.

Do not communicate progress through ring colors alone. The visible 65% and the sentence stating that 13 of 20 lessons are complete provide the same information in words and numbers. In the markup, role="progressbar" and aria-valuenow="65" communicate the progress to assistive technologies. When the underlying data changes, update the colored angle, visible percentage, completed lesson count, and aria-valuenow together. CSS does not automatically calculate how many lessons someone has finished.

A circular decoration does not require the same explanations as a chart conveying data. If you use colored sectors to represent several categories, provide category names and values in text or a table; a CSS background by itself is not an accessible data chart. HueRoll can help you explore source colors and compare a selected color against white or black, but it does not automatically check arbitrary color pairs or the contrast across an entire gradient. Verify the finished colors against their actual neighbors.