text-gradient

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

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

Note: Not recommended for large amounts of text, suitable for headlines.

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, align, spacing, 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.

var TextGradient = require('text-gradient');
 
var MyGradient = 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
 */
MyGradient.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
 */
MyGradient = MyGradient.destroy();

License

MIT © Noel Delgado