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 = ; var MyGradient = ;
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;
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;
License
MIT © Noel Delgado