node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

postcss-conic-gradient

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(redyellowlimeaquabluemagentared);
}
 
/* after */
 
.groovy {
    background-image: url("data:image/svg+xml,...");
    background-image: conic-gradient(redyellowlimeaquabluemagentared);
}

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 postcss-conic-gradient --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'
        }
    }
});