Skip to content
Use conic gradients in your CSS files
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
canvaskit.js
canvaskit.wasm
gulpfile.js
index.js Migrated from Cairo to CanvasKit Dec 12, 2018
package-lock.json
package.json

README.md

PostCSS Conic Gradient Build Status

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/png;base64,...");
	background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

Usage

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

  1. Add PostCSS to your build tool.
  2. 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'
		}
	}
});
You can’t perform that action at this time.