'Beyond Linear: A Deep Dive into CSS Conic Gradients'

Unlock the power of circular patterns in your web designs. This comprehensive guide explores the CSS conic-gradient() function, from basic syntax to advanced techniques for creating pie charts, loaders, and stunning backgrounds.

For years, web developers had two trusty tools in their CSS gradient toolbox: linear-gradient() and radial-gradient(). They're fantastic for creating smooth transitions of color along a line or from a central point. But what if you need a gradient that sweeps around a circle, like the hands of a clock or a slice of pie? For a long time, this required complex SVG trickery or clever hacks with multiple elements.

Enter conic-gradient(). This powerful addition to the CSS Image Values and Replaced Content module gives us a native way to create gradients with color stops arranged around a central point, opening up a world of creative possibilities.

In this guide, we'll take a deep dive into everything conic-gradient has to offer. We'll start with the fundamentals and work our way up to building practical, real-world components like pie charts, loading spinners, and intricate background patterns. Let's get started!

What Exactly is a Conic Gradient?

Imagine a cone viewed from directly above. The colors of a conic gradient radiate from the center of that cone, sweeping around in a 360-degree arc. Unlike a radial gradient, where colors emerge from the center outwards, a conic gradient's colors are distributed around the circumference.

Here's a simple analogy:

• Linear Gradient: A sunset over the horizon.
• Radial Gradient: The ripples in a pond.
• Conic Gradient: A color wheel or a classic board game spinner.

The gradient line starts at the top (12 o'clock position) by default and proceeds clockwise. Let's look at the syntax.

Section 1: The Fundamentals of conic-gradient()

At its core, the syntax is straightforward and will feel familiar if you've used other CSS gradients.

The Basic Syntax

The simplest possible conic gradient just needs two colors. CSS will automatically distribute them evenly around the circle.

.element {
  background: conic-gradient(deeppink, cyan);
}

This code creates a gradient that starts with deeppink at the top (0 degrees), transitions smoothly to cyan as it moves clockwise, and finally meets the starting deeppink back at the top (360 degrees). The halfway point, cyan, will be at the bottom (180 degrees).

Adding More Colors

You can add as many colors as you like. CSS will space them out equally for you.

.element {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

This creates a beautiful, full-spectrum color wheel. Notice we added red at both the beginning and the end. This creates a seamless loop where the transition from magenta back to red is smooth. If we omitted the final red, the browser would create a hard stop between magenta and the starting red, which might not be what you want.

Section 2: Gaining Precision with Angles and Color Stops

Automatic color distribution is great, but the real power of conic gradients comes from defining exactly where each color should be.

Defining Color Stop Angles

You can specify an angle for each color stop. This tells the browser at which point in the circle that color should be fully present. The transition happens between the specified angles.

Let's create a simple three-color gradient with custom stops:

.element {
  background: conic-gradient(
    #f06 0deg,      /* Start with #f06 at the top */
    #f06 90deg,     /* Stay solid #f06 until 90deg */
    #9f6 90deg,     /* Start #9f6 at 90deg */
    #9f6 225deg,    /* Stay solid #9f6 until 225deg */
    #69f 225deg,    /* Start #69f at 225deg */
    #69f 360deg     /* Stay solid #69f until the end */
  );
}

This example introduces a key concept: hard stops. When a color's start angle is the same as the previous color's end angle, there is no transition—just a sharp line. This is the fundamental technique for creating pie charts!

Here's how you'd create a smooth transition between those same points:

.element {
  background: conic-gradient(
    #f06 90deg, 
    #9f6 225deg, 
    #69f 360deg
  );
}

In this version, the gradient smoothly transitions from #f06 to #9f6 between the 90-degree and 225-degree marks.

Using Percentages and Other Units

While deg (degrees) is the most common unit, you can also use percentages, grads, radians, or turns.

100% is equivalent to 360deg.

.element {
  /* This is the same as red 90deg, blue 270deg */
  background: conic-gradient(red 25%, blue 75%);
}

This can be more intuitive, especially when you're thinking in terms of proportions, like for a pie chart representing survey data.

Section 3: Advanced Control: Positioning and Repetition

Now that we've mastered color stops, let's explore how to change the gradient's orientation and center point, and how to create repeating patterns.

Changing the Starting Angle with from

By default, the gradient starts at 12 o'clock (0 degrees). You can change this with the from keyword.

.element {
  /* Start the gradient from the 3 o'clock position (90deg) */
  background: conic-gradient(from 90deg, red, blue);
}

This is incredibly useful for aligning your gradient with your design's layout or for animations where you might want to rotate the starting point.

Positioning the Center with at

You can also move the center (the apex of the cone) away from the default 50% 50% position using the at keyword.

.element {
  /* Move the gradient's center to the top-left corner */
  background: conic-gradient(at 0% 0%, red, blue);
}

This creates interesting perspective effects and can be used to generate unique, non-symmetrical patterns.

Creating Patterns with repeating-conic-gradient()

This is where things get really fun. repeating-conic-gradient() allows you to define a small wedge of a gradient and have it repeat around the full 360 degrees.

Let's create a classic sunburst or starburst pattern:

.element {
  background: repeating-conic-gradient(
    gold 0% 5%, 
    #000 5% 10%
  );
}

Here's what's happening:

1. We define a 10% slice of the circle.
2. From 0% to 5%, it's solid gold.
3. From 5% to 10%, it's solid #000.
4. The browser takes this 10% wedge (which is 36 degrees) and repeats it 10 times to fill the circle.

This is a remarkably efficient way to create complex patterns that would otherwise require large image files or complicated SVG.

Section 4: Practical Use Cases and Examples

Theory is great, but let's build some cool stuff. conic-gradient is not just a background generator; it's a component-building powerhouse.

1. The Classic Pie Chart

This is the quintessential use case for conic gradients. With just a single div and some CSS, you can create a data-driven, accessible, and easily updatable pie chart.

HTML:

<div class="pie-chart" role="img" aria-label="A pie chart showing project allocation: 40% for Design, 25% for Development, and 35% for Marketing.">
</div>

CSS:

:root {
  --design: 40%;
  --development: 25%;
  --marketing: 35%;

  --design-color: #5b21b6;
  --development-color: #16a34a;
  --marketing-color: #ea580c;
}

.pie-chart {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  
  /* Calculate the color stop positions */
  --design-stop: var(--design);
  --development-stop: calc(var(--design) + var(--development));

  background: conic-gradient(
    var(--design-color) 0% var(--design-stop),
    var(--development-color) var(--design-stop) var(--development-stop),
    var(--marketing-color) var(--development-stop) 100%
  );
}

This approach is incredibly powerful:

• Maintainable: Just update the CSS variables (--design, --development, etc.) to change the chart's data.
• Accessible: The role="img" and aria-label provide a text description for screen reader users.
• Lightweight: No JavaScript or image files required for the basic chart.

2. A Dynamic Loading Spinner

We can combine conic-gradient with CSS animations to create a sleek, modern loading spinner.

HTML:

<div class="loader"></div>

CSS:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;

  /* The gradient for the spinner's track */
  background: conic-gradient(
    #60a5fa 0deg,      /* Blue */
    #a78bfa 180deg,    /* Purple */
    #facc15 270deg,    /* Yellow */
    transparent 300deg /* Fade out to transparent */
  );

  /* Use a mask to cut out the center and create a ring */
  -webkit-mask-image: radial-gradient(transparent 60%, black 61%);
  mask-image: radial-gradient(transparent 60%, black 61%);

  /* Animate the rotation */
  animation: spin 1s linear infinite;
}

Here, we create a full conic gradient and then use the mask-image property to punch a hole in the middle, turning our circle into a donut. The transparent color stop creates a nice gap in the ring, which appears to rotate thanks to the spin animation.

3. A Checkerboard Pattern

This is a clever trick using repeating-conic-gradient and positioning the center.

CSS:

.checkerboard {
  background-color: #eee;
  background-image: 
    repeating-conic-gradient(#bbb 0% 25%, transparent 0% 50%)
      at 0 0, /* Top-left quadrant */
    repeating-conic-gradient(#bbb 0% 25%, transparent 0% 50%)
      at 50px 50px; /* Bottom-right quadrant, offset by the size */
  
  background-size: 100px 100px; /* The size of two 'squares' */
}

This works by creating two conic gradients. Each one creates a single solid quadrant (0% 25%). By layering them and offsetting the second one, their quadrants interlock to form a perfect checkerboard pattern. The background-size controls the scale of the pattern.

Section 5: Best Practices and Browser Support

As with any powerful tool, there are a few things to keep in mind.

Browser Support

conic-gradient() enjoys excellent support across all modern browsers, including Chrome, Firefox, Safari, and Edge. The main holdout is Internet Explorer, which is no longer supported by Microsoft and has a dwindling user base.

For critical applications, always provide a simple fallback background color:

.element {
  background-color: #ccc; /* Fallback for old browsers */
  background-image: conic-gradient(red, blue);
}

Browsers that don't understand conic-gradient will simply ignore that line and use the background-color.

Accessibility

Gradients are decorative. Never rely on color alone to convey important information.

• For Pie Charts: As shown in our example, always include a proper aria-label or provide a data table alongside the chart for screen reader users and those with color vision deficiency.
• Contrast: Ensure that any text placed on top of a conic gradient background has sufficient contrast against all the colors in the gradient. This can be tricky, so you might need to add a solid background to the text element itself.

Performance

CSS gradients are generally very performant as they are rendered by the browser's graphics engine. However, extremely complex repeating-conic-gradient patterns applied to very large elements could potentially impact performance. As always, test on your target devices, but for most use cases like UI elements and backgrounds, performance is not a concern.

Conclusion: Go Forth and Create Circles!

The conic-gradient() function is more than just another way to add color to a div. It's a fundamental building block for modern UI design, allowing us to create components that were previously complex or impossible with CSS alone.

We've seen how to go from a simple two-color sweep to a data-driven pie chart, an animated loader, and a mathematically precise checkerboard pattern. By mastering color stops, positioning, and repetition, you can replace images, simplify your DOM, and write more maintainable and scalable CSS.

So, the next time you need to represent cyclical data, create a circular pattern, or just add a dynamic splash of color that moves in an arc, remember the power of conic-gradient(). What will you build with it?