Editable Examples

Community examples

The emulate 3D with conic-gradient demo again, now with an image (+working in WebKit browsers) http://t.co/ZzAqwKLdaT pic.twitter.com/jdAEgGDnuI

— Ana Tudor (@anatudor) August 15, 2015

Another demo using `conic-gradient` for bouncing cube's faces (I hate animation) http://t.co/YXwJGaGQaM cc @LeaVerou pic.twitter.com/BEnimSXeMN

— Ana Tudor (@anatudor) August 15, 2015

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日

@LeaVerou Took it a bit further with some blend modes http://t.co/XEolonnTVt Wish we could animate... pic.twitter.com/EEAZ7cw2qV

— Ryan (@ryanantonydunn) June 23, 2015

Playing around with @LeaVerou 's conic-gradient polyfill http://t.co/HXEAo1PZeP pic.twitter.com/NzNOq8lu3T

— Lucas Bebber (@lucasbebber) June 23, 2015

Thanks @LeaVerou for the #conicGradient css polyfill! Makes creating a Color Wheel a snap http://t.co/uLxteQmQgh pic.twitter.com/V2YTCRe7rO

— Michael (@mge_de) June 25, 2015

Quick @CodePen demo: rays http://t.co/bEoBY5v3hk (using `conic-gradient()`) @LeaVerou pic.twitter.com/JZYVwubNcN

— Ana Tudor (@anatudor) August 29, 2015

Inspired from Basic Indian Sarees. Made using conic-gradient polyfill by @LeaVerou. https://t.co/HCYcprWA2W pic.twitter.com/Eb1w8pJbPF

— Praveen Puglia (@praveenpuglia) October 22, 2015

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)

Limitations

• No center point support
• No calc() support
• No midpoint color stops (color stops with no color)
• Negative color stop positions not supported
• Color interpolation happens without premultiplied alpha.

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.

Also, you can use PostCSS Conic Gradient to have conic gradient fallbacks added automatically to your CSS file.

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:

• Microsoft Edge Uservoice thread
• Gecko bug report
• Chromium bug report
• WebKit bug report

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