https://github.com/csstools/postcss-conic-gradient
Use conic gradients in your CSS files
https://github.com/csstools/postcss-conic-gradient
Last synced: 11 months ago
JSON representation
Use conic gradients in your CSS files
- Host: GitHub
- URL: https://github.com/csstools/postcss-conic-gradient
- Owner: csstools
- License: mit
- Archived: true
- Created: 2015-06-23T13:12:03.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-03-31T22:59:35.000Z (almost 7 years ago)
- Last Synced: 2025-04-21T22:01:47.573Z (11 months ago)
- Language: JavaScript
- Size: 1.17 MB
- Stars: 61
- Watchers: 6
- Forks: 16
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# PostCSS Conic Gradient [![Build Status][ci-img]][ci]
[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]!
```css
/* 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.
```sh
npm install postcss-conic-gradient --save-dev
```
### Node
```js
postcss([ require('postcss-conic-gradient')() ])
```
### Grunt
Install [Grunt PostCSS]:
```shell
npm install grunt-postcss --save-dev
```
Enable [PostCSS Conic Gradient] within your Gruntfile:
```js
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-conic-gradient')()
]
},
dist: {
src: 'css/*.css'
}
}
});
```
[ask browser vendors to implement them]: http://leaverou.github.io/conic-gradient/#ask
[ci]: https://travis-ci.org/jonathantneal/postcss-conic-gradient
[ci-img]: https://travis-ci.org/jonathantneal/postcss-conic-gradient.svg
[Cairo]: https://github.com/Automattic/node-canvas/wiki/_pages
[conic-gradient polyfill]: http://leaverou.github.io/conic-gradient/
[conic gradients]: http://w3.org/TR/css4-images/#conic-gradients
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
[Lea Verou]: http://lea.verou.me/
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Conic Gradient]: https://github.com/jonathantneal/postcss-conic-gradient