ILFront-End/postcss-conic-gradient

Use conic gradients in your CSS files

PostCSS Conic Gradient

PostCSS Conic Gradient is a PostCSS plugin that allows you to use conic gradients in your CSS files. It is based on Lea Verou’s excellent conic-gradient polyfill.

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!

/* before */

.hue-wheel {
	background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

/* after */

.hue-wheel {
	background-image: url("data:image/svg+xml,...");
	background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

Usage

You just need to follow these three steps to use PostCSS Conic Gradient:

1. Install Cairo.
2. Add PostCSS to your build tool.
3. Add PostCSS Conic Gradient as a PostCSS process.

npm install postcss-conic-gradient --save-dev

Node

postcss([ require('postcss-conic-gradient')() ])

Grunt

Install Grunt PostCSS:

npm install grunt-postcss --save-dev

Enable PostCSS Conic Gradient within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			processors: [
				require('postcss-conic-gradient')()
			]
		},
		dist: {
			src: 'css/*.css'
		}
	}
});