Skip to content
Fast and small gradients manipulation, built on top of TinyColor
Branch: master
Clone or download
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
LICENSE Version 0.4.2 Oct 30, 2018
browser.js Build with rollup Jan 1, 2019 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


npm version jsDelivr CDN Build Status Dependencies Status

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


$ npm install tinygradient



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([

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);


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


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


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();


This library is available under the MIT license.

You can’t perform that action at this time.