Skip to content
Fast and small gradients manipulation, built on top of TinyColor
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images update example Jun 18, 2014
tests Build with rollup Jan 1, 2019
.babelrc.js Build with rollup Jan 1, 2019
.gitignore
.travis.yml
LICENSE Version 0.4.2 Oct 30, 2018
README.md
browser.js Build with rollup Jan 1, 2019
browser.js.map Build with rollup Jan 1, 2019
index.html Update demo Mar 15, 2019
index.js Build with rollup Jan 1, 2019
package.json chore(package): update rollup to version 1.9.3 (#23) Apr 10, 2019
rollup.config.js Build with rollup Jan 1, 2019
types.d.ts remove .npmignore in favor of "files" Jan 5, 2019

README.md

tinygradient

npm version jsDelivr CDN Build Status Dependencies Status

Easily generate color gradients with an unlimited number of color stops and steps.

Installation

$ npm install tinygradient

Dependencies

Usage

The gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.

Initialize gradient

The tinygradient constructor takes a list or an array of colors stops.

// using varargs
var gradient = tinygradient('red', 'green', 'blue');

// using array
var gradient = tinygradient([
  '#ff0000',
  '#00ff00',
  '#0000ff'
]);

The colors are parsed with TinyColor, multiple formats are accepted.

var gradient = tinygradient([
  tinycolor('#ff0000'),       // tinycolor object
  {r: 0, g: 255, b: 0},       // RGB object
  {h: 240, s: 1, v: 1, a: 1}, // HSVa object
  'rgb(120, 120, 0)',         // RGB CSS string
  'gold'                      // named color
]);

You can also specify the position of each color stop (between 0 and 1). If no position is specified, stops are distributed equidistantly.

var gradient = tinygradient([
  {color: '#d8e0de', pos: 0},
  {color: '#255B53', pos: 0.8},
  {color: '#000000', pos: 1}
]);

Generate gradient

Each method takes at least the number of desired steps.

The generated gradients might have one more step in certain conditions.

// RGB interpolation
var colorsRgb = gradient.rgb(9);

rgb

// HSV clockwise interpolation
var colorsHsv = gradient.hsv(9);

hsv

// HSV counter-clockwise interpolation
var colorsHsv = gradient.hsv(9, true);

hsv2

There are also two methods which will automatically choose between clockwise and counter-clockwise.

// HSV interpolation using shortest arc between colors
var colorsHsv = gradient.hsv(9, 'short');

// HSV interpolation using longest arc between colors
var colorsHsv = gradient.hsv(9, 'long');

Each method returns an array of TinyColor objects, see available methods.

Get CSS gradient string

The css method will output a valid W3C string (without vendors prefix) to use with background-image CSS property.

// linear gradient to right (default)
var gradientStr = gradient.css();

// radial gradient ellipse at top left
var gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');

Get color at a specific position

Returns a single TinyColor object from a defined position in the gradient (from 0 to 1).

// with RGB interpolation
colorAt55Percent = gradient.rgbAt(0.55);

// with HSV interpolation
colorAt55Percent = gradient.hsvAt(0.55);

Reversing gradient

Returns a new instance of TinyGradient with reversed colors.

var reversedGradient = gradient.reverse();

License

This library is available under the MIT license.

You can’t perform that action at this time.