Package Exports

tinygradient

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tinygradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TinyGradient

JavaScript gradients generator

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

Built on top of TinyColor.

Compatible with Require.js/AMD and NodeJS.

Usage

The gradient can be generate 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');

Reversing gradient

Returns a new instance of TinyGradient with reversed colors.

var reversedGradient = gradient.reverse();

Tests

A Mocha test suite is available.

npm install
npm test