Conic gradients are awesome, but browsers haven’t realized yet. This polyfill lets you experiment with them now. If you like them, ask browser vendors to implement them !

Editable Examples

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

And one more with `clip-path` (WebKit only) http://t.co/D0cdRncK7C - one element per shape @LeaVerou pic.twitter.com/OpXiIyUDXX

A few more examples using the conic-gradient() polyfill http://t.co/x0sfVmzqPX (each one is one element ☺) @LeaVerou pic.twitter.com/60MDWDDE6Z

And an actually practical one: a metallic looking button! http://t.co/0SLAHN8gKL @LeaVerou pic.twitter.com/lmv98tp2nK

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

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:

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.