├── lib └── readme.js ├── index.js ├── .gitignore ├── package.json ├── templates └── README.md ├── src └── gradients.css ├── gradients.min.css ├── gradients.css ├── README.md └── index.html /lib/readme.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash') 2 | var fs = require('fs') 3 | var gzip = require('gzip-size') 4 | var filesize = require('filesize') 5 | var postcss = require('postcss') 6 | var cssstats = require('cssstats') 7 | 8 | var module = require('../package.json') 9 | var moduleCss = fs.readFileSync('./'+module.name+'.min.css', 'utf8') 10 | var moduleObj = cssstats(moduleCss) 11 | var moduleSize = filesize(moduleObj.gzipSize) 12 | 13 | var srcCSS = fs.readFileSync('./'+module.name+'.css', 'utf8') 14 | 15 | var template = fs.readFileSync('./templates/README.md', 'utf8') 16 | var tpl = _.template(template) 17 | var md = tpl({ 18 | module: module, 19 | moduleSize: moduleSize, 20 | moduleObj: moduleObj, 21 | srcCSS: srcCSS 22 | }) 23 | 24 | fs.writeFileSync('./README.md', md) 25 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // dependencies 2 | 3 | var fs = require("fs") 4 | var autoprefixer = require("autoprefixer") 5 | var postcss = require("postcss") 6 | var atImport = require("postcss-import") 7 | var cssvariables = require('postcss-css-variables') 8 | var compressor = require('node-minify') 9 | var conditionals = require('postcss-conditionals') 10 | var customMedia = require("postcss-custom-media") 11 | 12 | // css to be processed 13 | var css = fs.readFileSync("src/gradients.css", "utf8") 14 | 15 | // process css 16 | var output = postcss([autoprefixer]) 17 | .use(atImport()) 18 | .use(cssvariables()) 19 | .use(conditionals()) 20 | .use(customMedia()) 21 | .process(css, { 22 | from: "src/gradients.css", 23 | to: "gradients.css" 24 | }) 25 | .css 26 | 27 | fs.writeFile("gradients.css", output, 'utf-8') 28 | 29 | // Using YUI Compressor for CSS 30 | new compressor.minify({ 31 | type: 'sqwish', 32 | fileIn: 'gradients.css', 33 | fileOut: 'gradients.min.css', 34 | }); 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # List of files for git to ignore 2 | 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | 11 | # Thumbnails 12 | ._* 13 | 14 | # Files that might appear on external disk 15 | .Spotlight-V100 16 | .Trashes 17 | 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | # Vim 26 | Session.vim 27 | 28 | # Node 29 | node_modules/* 30 | npm-debug.log 31 | 32 | .DS_Store 33 | .AppleDouble 34 | .LSOverride 35 | 36 | # Icon must end with two \r 37 | Icon 38 | 39 | 40 | # Thumbnails 41 | ._* 42 | 43 | # Files that might appear on external disk 44 | .Spotlight-V100 45 | .Trashes 46 | 47 | # Directories potentially created on remote AFP share 48 | .AppleDB 49 | .AppleDesktop 50 | Network Trash Folder 51 | Temporary Items 52 | .apdisk 53 | 54 | # Vim 55 | Session.vim 56 | 57 | # Node 58 | node_modules/* 59 | npm-debug.log 60 | 61 | .DS_Store 62 | .AppleDouble 63 | .LSOverride 64 | 65 | # Icon must end with two \r 66 | Icon 67 | 68 | 69 | # Thumbnails 70 | ._* 71 | 72 | # Files that might appear on external disk 73 | .Spotlight-V100 74 | .Trashes 75 | 76 | # Directories potentially created on remote AFP share 77 | .AppleDB 78 | .AppleDesktop 79 | Network Trash Folder 80 | Temporary Items 81 | .apdisk 82 | 83 | # Vim 84 | Session.vim 85 | 86 | # Node 87 | node_modules/* 88 | npm-debug.log 89 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gradients", 3 | "version": "1.0.0", 4 | "style": "gradients.css", 5 | "homepage": "http://github.com/mrmrs/gradients", 6 | "description": "CSS module for setting gradients with single purpose classes.", 7 | "keywords": [ 8 | "css", 9 | "gradients", 10 | "colors", 11 | "postcss" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "http://github.com/mrmrs/gradients.git" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/mrmrs/gradients/issues", 19 | "email": "hi@mrmrs.cc" 20 | }, 21 | "author": { 22 | "name": "mrmrs", 23 | "email": "hi@mrmrs.cc", 24 | "url": "http://mrmrs.cc" 25 | }, 26 | "license": "MIT", 27 | "devDependencies": { 28 | "autoprefixer": "^5.2.0", 29 | "browser-sync": "^2.9.6", 30 | "cssnano": "^2.6.1", 31 | "cssstats": "^2.0.1", 32 | "filesize": "^3.1.3", 33 | "gzip-size": "^3.0.0", 34 | "immutable-css": "^0.1.0", 35 | "lodash": "^3.10.1", 36 | "node-minify": "^1.2.0", 37 | "perfectionist": "^1.3.1", 38 | "postcss": "^4.1.16", 39 | "postcss-browser-reporter": "^0.3.0", 40 | "postcss-conditionals": "^1.3.0", 41 | "postcss-css-variables": "^0.4.0", 42 | "postcss-custom-media": "^4.1.0", 43 | "postcss-import": "^6.2.0", 44 | "watch": "^0.16.0" 45 | }, 46 | "scripts": { 47 | "start": "node index.js", 48 | "build": "watch 'npm start' ./src", 49 | "server": "browser-sync start --files './*'" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /templates/README.md: -------------------------------------------------------------------------------- 1 | # <%= module.name %> 2 | <%= module.version %> 3 | 4 | <%= module.description %> 5 | 6 | ## Install 7 | ``` 8 | npm install --save-dev <%= module.name %> 9 | ``` 10 | 11 | or download the css on github and include in your project: 12 | 13 | ``` 14 | git clone git@github.com:mrmrs/<%= module.name %> 15 | ``` 16 | 17 | ## The Code 18 | ``` 19 | <%= srcCSS %> 20 | ``` 21 | 22 | ## Author 23 | 24 | [mrmrs](http://mrmrs.io) 25 | 26 | ## License 27 | 28 | The MIT License (MIT) 29 | 30 | Copyright (c) 2015 @mrmrs 31 | 32 | Permission is hereby granted, free of charge, to any person obtaining a copy 33 | of this software and associated documentation files (the "Software"), to deal 34 | in the Software without restriction, including without limitation the rights 35 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 36 | copies of the Software, and to permit persons to whom the Software is 37 | furnished to do so, subject to the following conditions: 38 | 39 | The above copyright notice and this permission notice shall be included in 40 | all copies or substantial portions of the Software. 41 | 42 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 43 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 44 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 45 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 46 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 47 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 48 | THE SOFTWARE. 49 | 50 | -------------------------------------------------------------------------------- /src/gradients.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * GRADIENTS.CSS 4 | * v.1.0.0 5 | * @mrmrs 6 | * 7 | * Each color has a class for setting a gradient on 8 | * text & background 9 | * 10 | * - Aqua 11 | * - Blue 12 | * - Navy 13 | * - Teal 14 | * - Green 15 | * - Lime 16 | * - Yellow 17 | * - Orange 18 | * - Red 19 | * - Fuchshia 20 | * - Purple 21 | * - Maroon 22 | * 23 | */ 24 | 25 | 26 | .bg-aqua-gradient { 27 | background: rgba(127,219,255,1); 28 | background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); 29 | } 30 | 31 | .bg-blue-gradient { 32 | background: rgba(0,116,217,1); 33 | background: linear-gradient(to bottom, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); 34 | } 35 | 36 | .bg-navy-gradient { 37 | background: rgba(0,32,63,1); 38 | background: linear-gradient(to bottom, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%); 39 | } 40 | 41 | .bg-teal-gradient { 42 | background: rgba(57,204,204,1); 43 | background: linear-gradient(to bottom, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%); 44 | } 45 | 46 | .bg-green-gradient { 47 | background: rgba(46,204,64,1); 48 | background: linear-gradient(to bottom, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%); 49 | } 50 | 51 | .bg-lime-gradient { 52 | background: rgba(1,255,111,1); 53 | background: linear-gradient(to bottom, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%); 54 | } 55 | 56 | .bg-yellow-gradient { 57 | background: rgba(255,221,0,1); 58 | background: linear-gradient(to bottom, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%); 59 | } 60 | 61 | .bg-orange-gradient { 62 | background: rgba(255,133,27,1); 63 | background: linear-gradient(to bottom, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%); 64 | } 65 | 66 | .bg-red-gradient { 67 | background: rgba(246,46,36,1); 68 | background: linear-gradient(to bottom, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%); 69 | } 70 | 71 | .bg-fuchsia-gradient { 72 | background: rgba(240,18,188,1); 73 | background: linear-gradient(to bottom, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%); 74 | } 75 | 76 | .bg-purple-gradient { 77 | background: rgba(176,13,201,1); 78 | background: linear-gradient(to bottom, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%); 79 | } 80 | 81 | 82 | .bg-maroon-gradient { 83 | background: rgba(204,31,115,1); 84 | background: linear-gradient(to bottom, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%); 85 | } 86 | 87 | -------------------------------------------------------------------------------- /gradients.min.css: -------------------------------------------------------------------------------- 1 | .bg-aqua-gradient{background:rgba(127,219,255,1);background:-webkit-linear-gradient(top,rgba(127,219,255,1) 0%,rgba(82,140,163,1) 100%);background:linear-gradient(to bottom,rgba(127,219,255,1) 0%,rgba(82,140,163,1) 100%)}.bg-blue-gradient{background:rgba(0,116,217,1);background:-webkit-linear-gradient(top,rgba(0,116,217,1) 0%,rgba(0,65,122,1) 100%);background:linear-gradient(to bottom,rgba(0,116,217,1) 0%,rgba(0,65,122,1) 100%)}.bg-navy-gradient{background:rgba(0,32,63,1);background:-webkit-linear-gradient(top,rgba(0,32,63,1) 0%,rgba(0,10,20,1) 100%);background:linear-gradient(to bottom,rgba(0,32,63,1) 0%,rgba(0,10,20,1) 100%)}.bg-teal-gradient{background:rgba(57,204,204,1);background:-webkit-linear-gradient(top,rgba(57,204,204,1) 0%,rgba(34,122,122,1) 100%);background:linear-gradient(to bottom,rgba(57,204,204,1) 0%,rgba(34,122,122,1) 100%)}.bg-green-gradient{background:rgba(46,204,64,1);background:-webkit-linear-gradient(top,rgba(46,204,64,1) 0%,rgba(28,122,39,1) 100%);background:linear-gradient(to bottom,rgba(46,204,64,1) 0%,rgba(28,122,39,1) 100%)}.bg-lime-gradient{background:rgba(1,255,111,1);background:-webkit-linear-gradient(top,rgba(1,255,111,1) 0%,rgba(2,163,72,1) 100%);background:linear-gradient(to bottom,rgba(1,255,111,1) 0%,rgba(2,163,72,1) 100%)}.bg-yellow-gradient{background:rgba(255,221,0,1);background:-webkit-linear-gradient(top,rgba(255,221,0,1) 0%,rgba(184,147,0,1) 100%);background:linear-gradient(to bottom,rgba(255,221,0,1) 0%,rgba(184,147,0,1) 100%)}.bg-orange-gradient{background:rgba(255,133,27,1);background:-webkit-linear-gradient(top,rgba(255,133,27,1) 0%,rgba(255,80,27,1) 100%);background:linear-gradient(to bottom,rgba(255,133,27,1) 0%,rgba(255,80,27,1) 100%)}.bg-red-gradient{background:rgba(246,46,36,1);background:-webkit-linear-gradient(top,rgba(246,46,36,1) 0%,rgba(255,54,121,1) 100%);background:linear-gradient(to bottom,rgba(246,46,36,1) 0%,rgba(255,54,121,1) 100%)}.bg-fuchsia-gradient{background:rgba(240,18,188,1);background:-webkit-linear-gradient(top,rgba(240,18,188,1) 0%,rgba(163,11,128,1) 100%);background:linear-gradient(to bottom,rgba(240,18,188,1) 0%,rgba(163,11,128,1) 100%)}.bg-purple-gradient{background:rgba(176,13,201,1);background:-webkit-linear-gradient(top,rgba(176,13,201,1) 0%,rgba(107,7,122,1) 100%);background:linear-gradient(to bottom,rgba(176,13,201,1) 0%,rgba(107,7,122,1) 100%)}.bg-maroon-gradient{background:rgba(204,31,115,1);background:-webkit-linear-gradient(top,rgba(204,31,115,1) 0%,rgba(133,20,75,1) 100%);background:linear-gradient(to bottom,rgba(204,31,115,1) 0%,rgba(133,20,75,1) 100%)} -------------------------------------------------------------------------------- /gradients.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * GRADIENTS.CSS 4 | * v.1.0.0 5 | * @mrmrs 6 | * 7 | * Each color has a class for setting a gradient on 8 | * text & background 9 | * 10 | * - Aqua 11 | * - Blue 12 | * - Navy 13 | * - Teal 14 | * - Green 15 | * - Lime 16 | * - Yellow 17 | * - Orange 18 | * - Red 19 | * - Fuchshia 20 | * - Purple 21 | * - Maroon 22 | * 23 | */ 24 | 25 | 26 | .bg-aqua-gradient { 27 | background: rgba(127,219,255,1); 28 | background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); 29 | background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); 30 | } 31 | 32 | .bg-blue-gradient { 33 | background: rgba(0,116,217,1); 34 | background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); 35 | background: linear-gradient(to bottom, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); 36 | } 37 | 38 | .bg-navy-gradient { 39 | background: rgba(0,32,63,1); 40 | background: -webkit-linear-gradient(top, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%); 41 | background: linear-gradient(to bottom, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%); 42 | } 43 | 44 | .bg-teal-gradient { 45 | background: rgba(57,204,204,1); 46 | background: -webkit-linear-gradient(top, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%); 47 | background: linear-gradient(to bottom, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%); 48 | } 49 | 50 | .bg-green-gradient { 51 | background: rgba(46,204,64,1); 52 | background: -webkit-linear-gradient(top, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%); 53 | background: linear-gradient(to bottom, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%); 54 | } 55 | 56 | .bg-lime-gradient { 57 | background: rgba(1,255,111,1); 58 | background: -webkit-linear-gradient(top, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%); 59 | background: linear-gradient(to bottom, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%); 60 | } 61 | 62 | .bg-yellow-gradient { 63 | background: rgba(255,221,0,1); 64 | background: -webkit-linear-gradient(top, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%); 65 | background: linear-gradient(to bottom, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%); 66 | } 67 | 68 | .bg-orange-gradient { 69 | background: rgba(255,133,27,1); 70 | background: -webkit-linear-gradient(top, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%); 71 | background: linear-gradient(to bottom, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%); 72 | } 73 | 74 | .bg-red-gradient { 75 | background: rgba(246,46,36,1); 76 | background: -webkit-linear-gradient(top, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%); 77 | background: linear-gradient(to bottom, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%); 78 | } 79 | 80 | .bg-fuchsia-gradient { 81 | background: rgba(240,18,188,1); 82 | background: -webkit-linear-gradient(top, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%); 83 | background: linear-gradient(to bottom, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%); 84 | } 85 | 86 | .bg-purple-gradient { 87 | background: rgba(176,13,201,1); 88 | background: -webkit-linear-gradient(top, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%); 89 | background: linear-gradient(to bottom, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%); 90 | } 91 | 92 | 93 | .bg-maroon-gradient { 94 | background: rgba(204,31,115,1); 95 | background: -webkit-linear-gradient(top, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%); 96 | background: linear-gradient(to bottom, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%); 97 | } 98 | 99 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gradients 2 | 3 | 1.0.0 4 | 5 | CSS module for quickly setting gradients with single purpose classes. 6 | 7 | ## Install 8 | ``` 9 | npm install --save-dev gradients 10 | ``` 11 | 12 | or download the css on github and include in your project: 13 | 14 | ``` 15 | git clone git@github.com:mrmrs/gradients 16 | ``` 17 | 18 | ## The Code 19 | ``` 20 | /* 21 | * 22 | * GRADIENTS.CSS 23 | * v.1.0.0 24 | * @mrmrs 25 | * 26 | * Each color has a class for setting a gradient on 27 | * text & background 28 | * 29 | * - Aqua 30 | * - Blue 31 | * - Navy 32 | * - Teal 33 | * - Green 34 | * - Lime 35 | * - Yellow 36 | * - Orange 37 | * - Red 38 | * - Fuchshia 39 | * - Purple 40 | * - Maroon 41 | * 42 | */ 43 | 44 | 45 | .bg-aqua-gradient { 46 | background: rgba(127,219,255,1); 47 | background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); 48 | background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); 49 | } 50 | 51 | .bg-blue-gradient { 52 | background: rgba(0,116,217,1); 53 | background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); 54 | background: linear-gradient(to bottom, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); 55 | } 56 | 57 | .bg-navy-gradient { 58 | background: rgba(0,32,63,1); 59 | background: -webkit-linear-gradient(top, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%); 60 | background: linear-gradient(to bottom, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%); 61 | } 62 | 63 | .bg-teal-gradient { 64 | background: rgba(57,204,204,1); 65 | background: -webkit-linear-gradient(top, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%); 66 | background: linear-gradient(to bottom, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%); 67 | } 68 | 69 | .bg-green-gradient { 70 | background: rgba(46,204,64,1); 71 | background: -webkit-linear-gradient(top, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%); 72 | background: linear-gradient(to bottom, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%); 73 | } 74 | 75 | .bg-lime-gradient { 76 | background: rgba(1,255,111,1); 77 | background: -webkit-linear-gradient(top, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%); 78 | background: linear-gradient(to bottom, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%); 79 | } 80 | 81 | .bg-yellow-gradient { 82 | background: rgba(255,221,0,1); 83 | background: -webkit-linear-gradient(top, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%); 84 | background: linear-gradient(to bottom, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%); 85 | } 86 | 87 | .bg-orange-gradient { 88 | background: rgba(255,133,27,1); 89 | background: -webkit-linear-gradient(top, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%); 90 | background: linear-gradient(to bottom, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%); 91 | } 92 | 93 | .bg-red-gradient { 94 | background: rgba(246,46,36,1); 95 | background: -webkit-linear-gradient(top, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%); 96 | background: linear-gradient(to bottom, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%); 97 | } 98 | 99 | .bg-fuchsia-gradient { 100 | background: rgba(240,18,188,1); 101 | background: -webkit-linear-gradient(top, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%); 102 | background: linear-gradient(to bottom, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%); 103 | } 104 | 105 | .bg-purple-gradient { 106 | background: rgba(176,13,201,1); 107 | background: -webkit-linear-gradient(top, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%); 108 | background: linear-gradient(to bottom, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%); 109 | } 110 | 111 | 112 | .bg-maroon-gradient { 113 | background: rgba(204,31,115,1); 114 | background: -webkit-linear-gradient(top, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%); 115 | background: linear-gradient(to bottom, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%); 116 | } 117 | 118 | 119 | ``` 120 | 121 | ## Author 122 | 123 | [mrmrs](http://mrmrs.io) 124 | 125 | ## License 126 | 127 | The MIT License (MIT) 128 | 129 | Copyright (c) 2015 @mrmrs 130 | 131 | Permission is hereby granted, free of charge, to any person obtaining a copy 132 | of this software and associated documentation files (the "Software"), to deal 133 | in the Software without restriction, including without limitation the rights 134 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 135 | copies of the Software, and to permit persons to whom the Software is 136 | furnished to do so, subject to the following conditions: 137 | 138 | The above copyright notice and this permission notice shall be included in 139 | all copies or substantial portions of the Software. 140 | 141 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 142 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 143 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 144 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 145 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 146 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 147 | THE SOFTWARE. 148 | 149 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GRADIENTS 8 | 9 | 10 | 11 | 12 | 13 | 14 | 26 | 27 | 28 |
29 |
30 | 31 |

32 | GRADIENTS 33 |

34 |

446 bytes of curated css gradients

35 |
36 | View on GitHub 37 | Download CSS 38 | Tweet 39 |
40 |
41 | 42 | npm install --save-dev gradients 43 | 44 |
45 |
46 |
47 |
48 |
49 |

Aqua

50 | 
 51 | 
 52 | .bg-aqua-gradient {
 53 |   background: rgba(127,219,255,1);
 54 |   background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%);
 55 |   background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%);
 56 | }
 57 | 
 58 |
59 |
60 |
61 |
62 |

Blue

63 | 
 64 | 
 65 | .bg-blue-gradient {
 66 |   background: rgba(0,116,217,1);
 67 |   background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%);
 68 |   background: linear-gradient(to bottom, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%);
 69 | }
 70 | 
 71 |
72 |
73 |
74 |
75 |

Navy

76 | 
 77 | 
 78 | .bg-navy-gradient {
 79 |   background: rgba(0,32,63,1);
 80 |   background: -webkit-linear-gradient(top, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%);
 81 |   background: linear-gradient(to bottom, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%);
 82 | }
 83 | 
 84 |
85 |
86 |
87 |
88 |

Teal

89 | 
 90 | 
 91 | .bg-teal-gradient {
 92 |   background: rgba(57,204,204,1);
 93 |   background: -webkit-linear-gradient(top, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%);
 94 |   background: linear-gradient(to bottom, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%);
 95 | }
 96 | 
 97 |
98 | 99 |
100 |
101 |
102 |

Green

103 | 
104 | 
105 | .bg-green-gradient {
106 |   background: rgba(46,204,64,1);
107 |   background: -webkit-linear-gradient(top, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%);
108 |   background: linear-gradient(to bottom, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%);
109 | }
110 | 
111 |
112 |
113 |
114 |

Lime

115 | 
116 | 
117 | .bg-lime-gradient {
118 |   background: rgba(1,255,111,1);
119 |   background: -webkit-linear-gradient(top, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%);
120 |   background: linear-gradient(to bottom, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%);
121 | }
122 | 
123 | 
124 |
125 |
126 |
127 |

Yellow

128 | 
129 | 
130 | .bg-yellow-gradient {
131 |   background: rgba(255,221,0,1);
132 |   background: -webkit-linear-gradient(top, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%);
133 |   background: linear-gradient(to bottom, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%);
134 | }
135 | 
136 |
137 |
138 |
139 |

Orange

140 | 
141 | 
142 | .bg-orange-gradient {
143 |   background: rgba(255,133,27,1);
144 |   background: -webkit-linear-gradient(top, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%);
145 |   background: linear-gradient(to bottom, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%);
146 | }
147 | 
148 |
149 |
150 |
151 |

Red

152 | 
153 | 
154 | .bg-red-gradient {
155 |   background: rgba(246,46,36,1);
156 |   background: -webkit-linear-gradient(top, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%);
157 |   background: linear-gradient(to bottom, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%);
158 | }
159 | 
160 |
161 |
162 |
163 |

Fuchsia

164 | 
165 | 
166 | .bg-fuchsia-gradient {
167 |   background: rgba(240,18,188,1);
168 |   background: -webkit-linear-gradient(top, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%);
169 |   background: linear-gradient(to bottom, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%);
170 | }
171 | 
172 |
173 |
174 |
175 |

Purple

176 | 
177 | 
178 | .bg-purple-gradient {
179 |   background: rgba(176,13,201,1);
180 |   background: -webkit-linear-gradient(top, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%);
181 |   background: linear-gradient(to bottom, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%);
182 | }
183 | 
184 |
185 |
186 |
187 |

Maroon

188 | 
189 | 
190 | .bg-maroon-gradient {
191 |   background: rgba(204,31,115,1);
192 |   background: -webkit-linear-gradient(top, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%);
193 |   background: linear-gradient(to bottom, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%);
194 | }
195 | 
196 |
197 |
198 | 216 | 217 | 218 | 219 | --------------------------------------------------------------------------------