Beautiful color gradients in terminal output
import gradient from 'gradient-string'; console.log(gradient(['cyan', 'pink'])('Hello world!'));
// Provide an array of colors const coolGradient = gradient(['#FF0000', '#00FF00', '#0000FF']);
The colors are parsed with TinyColor, multiple formats are accepted.
const coolGradient = gradient([ tinycolor('#FFBB65'), // 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 ]);
const coolString = coolGradient('This is a fancy string!'); console.log(coolString);
import { rainbow, pastel } from 'gradient-string'; // Use the pastel built-in gradient console.log(pastel('I love gradient-string!')); // Use the rainbow built-in gradient console.log(rainbow('It is so pretty! 🌈'));Available built-in gradients
In some cases, you may want to apply the same horizontal gradient on each line of a long text (or a piece of ASCII art).
You can use the multiline()
method of a gradient to ensure that the colors are vertically aligned.
import gradient, { rainbow } from 'gradient-string'; // Use the same gradient on every line const duck = gradient(['green', 'yellow']).multiline(` __ <(o )___ ( ._> / --- `); console.log(duck); // Works with aliases rainbow.multiline('Multi line\nstring'); // Works with advanced options (read below) gradient(['cyan', 'pink'], { interpolation: 'hsv' }).multiline('Multi line\nstring');
There are also more advanced options for gradient customization, such as custom color stops, or choice of color interpolation
By default, the gradient color stops are distributed equidistantly.
You can specify the position of each color stop (between 0
and 1
), using the following syntax:
let coolGradient = gradient([ { color: '#d8e0de', pos: 0 }, { color: '#255B53', pos: 0.8 }, { color: '#000000', pos: 1 }, ]);
When creating a gradient, you can provide a second parameter to choose how the colors will be generated.
Here is the full gradient
API:
gradient([colors], options?)(text)
Type: Array<Color>
Colors of the gradient. Multiple formats are accepted.
Type: String
String you want to color.
Type: Object
(optional)
Type: string
The gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors. interpolation
can be set to rgb
for RGB interpolation, orhsv
for HSV interpolation.
Defaults to rgb
. Case-insensitive
Type: string
Used only in the case of HSV interpolation.
Because hue can be considered as a circle, there are two ways to go from a color to another color.hsvSpin
can be either short
or long
, depending on if you want to take the shortest or the longest way between two colors.
Defaults to short
. Case-insensitive
const str = 'â– '.repeat(48); // Standard RGB gradient const standardRGBGradient = gradient(['red', 'green']); // Short HSV gradient: red -> yellow -> green const shortHSVGradient = gradient(['red', 'green'], { interpolation: 'hsv' }); // Long HSV gradient: red -> magenta -> blue -> cyan -> green const longHSVGradient = gradient(['red', 'green'], { interpolation: 'hsv', hsvSpin: 'long' }); console.log(standardRGBGradient(str)); console.log(shortHSVGradient(str)); console.log(longHSVGradient(str));
MIT © Boris K
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4