Community examples

And an actually practical one: a metallic looking button! http://t.co/0SLAHN8gKL @LeaVerou pic.twitter.com/lmv98tp2nK
— Ana Tudor (@anatudor) June 19, 2015

Cog animation using #conicGradient (css polyfill made by @LeaVerou) http://t.co/wH95eZTO2s (now with screenshot) pic.twitter.com/d7Bif13Hwo
— Ryan (@ryanantonydunn) June 23, 2015

New idea: combined with `clip-path` (WebKit-only) http://t.co/Roz0fOrMEF @LeaVerou pic.twitter.com/vGe3phS6nR
— Ana Tudor (@anatudor) June 19, 2015

A few more examples using the conic-gradient() polyfill http://t.co/x0sfVmzqPX (each one is one element ☺) @LeaVerou pic.twitter.com/60MDWDDE6Z
— Ana Tudor (@anatudor) June 19, 2015

@LeaVerou Radar! http://t.co/FIfXFBTp4k 1 element, created now using the 3 types of gradients: linear, radial, conic☺ pic.twitter.com/Y4KWGpG2fr
— Ana Tudor (@anatudor) June 18, 2015

And one more with `clip-path` (WebKit only) http://t.co/D0cdRncK7C - one element per shape @LeaVerou pic.twitter.com/OpXiIyUDXX
— Ana Tudor (@anatudor) June 19, 2015

I just made a rotating snake [#illusion] with #conicGradient (css polyfill made by @LeaVerou ) http://t.co/9ouDRkLq3s pic.twitter.com/IdV4h2MO4i
— R+ (@RplusTW) 2015 6月 21日

Features

Color stop normalization
Both conic-gradient() and repeating-conic-gradient() support
Follows background-size (pixels and percentages). By default occupies the entire element, just like a proper CSS gradient.
Supports double position syntax (two positions for the same color stop, as a shortcut for two consecutive color stops with the same color)

Usage

To use directly in your CSS code like you would if it was supported, it requires -prefix-free. Just include both scripts in order:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>

Alternatively, you can use the API to directly get the SVG element generated and do whatever you want with it:

var gradient = new ConicGradient({
    stops: "gold 40%, #f06 0", // required
    repeating: true, // Default: false
    size: 400 // Default: Math.max(innerWidth, innerHeight)
});

console.log(gradient.svg); // SVG markup
console.log(gradient.png); // PNG image (fixed dimensions) as a data URL
console.log(gradient.dataURL); // data URL
console.log(gradient.blobURL); // blog URL

Note that the generated image will always resize accordingly, you don’t have to provide a size. The size argument just controls the resolution of the bitmap image generated inside the SVG that will be scaled. Making it smaller will result in faster performance but less crisp gradients.

How can I get conic gradients implemented?

The best way to get a feature implemented is asking browser vendors to do it. It’s really that simple. Browser vendors prioritize what to implement based on developer requests, so the more developers asking for a feature, the higher the chances browsers will notice.

Also, communicate directly with the developers. Vote or comment in the following:

But mainly, and regardless of the venue, speak up. Make noise. It matters more than you think.

CSS conic-gradient() polyfill

Editable Examples

Community examples

Features

Limitations

Usage

How can I get conic gradients implemented?