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.

Demo

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

License

MIT © Noel Delgado