Tutorial

Introduction to Conic Gradients in CSS

Published on September 3, 2020
author

Alligator.io

Introduction to Conic Gradients in CSS

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

We can already do linear gradients and radial gradients with CSS quite easily, and now there’s a 3rd type of gradient that will be defined in the spec. Conic gradients are similar to radial gradients, except that the color stops are on the outer edge of the circle that gets created.

For example, here’s a radial gradient and a conic gradient that have the same color stops:

.gradient {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.radial {
  background: radial-gradient(#FAE042, #4AAE9B);
}
.conic {
  background: conic-gradient(#FAE042, #4AAE9B);
}

And here’s the markup:

<div class="gradient radial"></div>
<div class="gradient conic"></div>

More Examples / Syntax

Conic gradients can have multiple color stops:

.conic {
  background: conic-gradient(cyan, magenta, yellow, black);
}

Each color can specify it’s stop position using units such as degrees, turns or percentages:

.conic {
  background: conic-gradient(red 180deg, #4AAE9B);
}
.conic-2 {
  background: conic-gradient(red 180deg 90%, #4AAE9B);
}

Notice how a second position value for a color stop specifies the transition.


Hard stops

The color stops can jump to the next color immediately by eliminating the transition between two stops:

.conic-4 {
  background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0);
}

from and at Keywords

You can specify the starting angle using the from keyword:

.conic {
  background: conic-gradient(from 45deg, cyan, magenta, yellow);
}

Furthermore, you can use the at keyword to specify the center of the transition:

.conic {
  background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
}

Unfortunately I can’t show an example of using at at this moment because at the time of this writing there’s a bug in the polyfill that would make all the other examples crash when viewed in a browser that relies on the polyfill.

Smooth Transitions

For smooth transitions, have the last color stop be the same as the first one:

.conic {
  background: conic-gradient(cyan, magenta, yellow, cyan);
}

Repeating Conic Gradients

There’s also a repeating-conic-gradient function that can be used to create some interesting patterns with conic gradients:

.conic-repeating {
  background: repeating-conic-gradient(red 10%, #4AAE9B 20%);
}

Polyfill

As of 2020, only 85% of devices worldwide support the conic-gradient property. Thankfully though, there’s a polyfill by @LeaVerou that we can use to start using conic gradients now.

To use the polyfill simply add the scripts for Prefix-free and the conic gradient polyfill itself before the closing body tag in your pages:

<script src="/assets/polyfills/prefixfree.min.js"></script>
<script src="/assets/polyfills/conic-gradient.js"></script>

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel