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.
The tinygradient constructor takes a list or an array of colors stops.
// using varargsconstgradient=tinygradient('red','green','blue');// using arrayconstgradient=tinygradient(['#ff0000','#00ff00','#0000ff']);The colors are parsed with TinyColor, multiple formats are accepted.
constgradient=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.
constgradient=tinygradient([{color: '#d8e0de',pos: 0},{color: '#255B53',pos: 0.8},{color: '#000000',pos: 1}]);Each method takes at least the number of desired steps.
The generated gradients might have one more step in certain conditions.
// RGB interpolationconstcolorsRgb=gradient.rgb(9);
// HSV clockwise interpolationconstcolorsHsv=gradient.hsv(9);
// HSV counter-clockwise interpolationconstcolorsHsv=gradient.hsv(9,true);
There are also two methods which will automatically choose between clockwise and counter-clockwise.
// HSV interpolation using shortest arc between colorsconstcolorsHsv=gradient.hsv(9,'short');// HSV interpolation using longest arc between colorsconstcolorsHsv=gradient.hsv(9,'long');Each method returns an array of TinyColor objects, see available methods.
The css method will output a valid W3C string (without vendors prefix) to use with background-image CSS property.
// linear gradient to right (default)constgradientStr=gradient.css();// radial gradient ellipse at top leftconstgradientStr=gradient.css('radial','farthest-corner ellipse at top left');Returns a single TinyColor object from a defined position in the gradient (from 0 to 1).
// with RGB interpolationcolorAt55Percent=gradient.rgbAt(0.55);// with HSV interpolationcolorAt55Percent=gradient.hsvAt(0.55);Returns a new instance of TinyGradient with reversed colors.
constreversedGradient=gradient.reverse();Returns a new instance of TinyGradient with looped colors.
constloopedGradient=gradient.loop();I is possible to define stops with the pos property only and no color. This allows to define the position of the mid-point between the previous and the next stop.
constgradient=tinygradient([{color: 'black',pos: 0},{pos: 0.8},// #808080 will be at 80% instead of 50%{color: 'white',pos: 1}]);This library is available under the MIT license.
