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