text-gradient

Vanilla js version of javierbyte’s – react-textgradient.

Apply text gradients with CSS, inline SVG mask fallback or a solid color as last resort.

Note: Not recommended for large amounts of text, most suitable for headings and the like.

Features

Uses CSS text gradients when possible (Chrome, Safari, iOS, android).
Fallbacks to SVG masking on Firefox url(#gradient).
The text remains controlled via CSS (font size, family, weight, text-align, line-height, etc…)

Install

npm install text-gradient --save

Usage

@argument element <required> [NodeElement] the element to apply the gradient
@argument options <optional> [Object] Gradient color-stops, direction, text.

const TextGradient = require('text-gradient');
const gradient = new TextGradient(document.getElementById('headline'), {
  from: '#B0E537',
  to: '#009DE9',
  direction: 'right'
});

Options

name	type	default	description
text	String	`element.textContent`	The text to display
from	String (valid color format)	`transparent`	Gradient’s first color-stop
to	String (valid color format)	`transparent`	Gradient’s last color-stop
direction	String	`right`	One of (top, right, bottom, left)

API

updateText(String)

Changes the text contents.

/*
 * @argument text <required> [String]
 * @return undefined
 */
gradient.updateText('Some other catchy headline');

destroy()

Remove the text-gradient effect, references and elements created by the instance (svg container, defs, extra spans to wrap the content, etc).

/*
 * @return null
 */
gradient = gradient.destroy();