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.
- 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...)
npm install text-gradient --save@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'
});| 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) |
Changes the text contents.
/*
* @argument text <required> [String]
* @return undefined
*/
gradient.updateText('Some other catchy headline');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();MIT © Noel Delgado