Introduction

A conic gradient is similar to a radial gradient. Both are circular and use the center of the element as the source point for color stops. However, where the color stops of a radial gradient emerge from the center of the circle, a conic gradient places them around the circle.

They're called "conic" because they tend to look like the shape of a cone that is being viewed from above. Well, at least when there is a distinct angle provided and the contrast between the color values is great enough to tell a difference.

Syntax

The conic gradient syntax is easier to understand in plain English:

Make a conic-gradient that is located at [some point] that starts with [one color] at some angle and ends with [another color] at [some angle]

The official specification looks more like this:

conic-gradient() = conic-gradient([ from  ]? [ at  ]?,
				
				  )

At its most basic level, it looks like this:

.conic-gradient {
			background: conic-gradient(#fff, #000);
			}

.. where it is assumed that the location of the gradient starts at the very center of the element (50% 50%) and is evenly distributed between white and black color values.

If we do not specify an angle for the colors, then it is assumed that the gradient is evenly divided between the colors, starting at 0deg and ending at 360deg.

That kind of creates a hard stop where the colors bump right up to one another at 0deg and 360deg. If our starting color would begin somewhere else on the circle, say one-quarter of the way at 90deg, then that creates a smoother gradient and we start to get that cool cone-looking perspective.

.conic-gradient {
			background: conic-gradient(from 90deg, #fff, #000);
			}

Polyfill

Lea Verou provides a polyfill.

Polyfill

To use include scripts

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

Browser Support

Click here for browser supportBrowser Support

Additional Resources

Specs

This is the official specification where conic gradients are being introduced.

Conic gradints in css
A CSS-Tricks post on the topic from 2013 with awesome examples.
polyfil
: Lea Verou has created a polyfill that makes conic gradients possible ahead of the official release.
Original post on css-tricks