text-gradient applies text gradients with CSS, inline SVG mask fallback or a solid color as last resort.

npm install text-gradient --save

Hum, how?

- Uses CSS text-gradients if supported (Chrome, Safari, iOS, android).
- Otherwise it fallbacks to SVG masking url(#gradient).
- The text remains controlled via CSS (font size, family, weight, align, line-height, etc...)

Demo

Dueil Angoisseus

from: 'grey', direction: 'bottom'

The Quick Brown Fox

from: '#6B6ED8', to: 'rgb(74, 197, 195)'

A B C D

from: 'hsl(337, 49%, 65%)', to: 'hsl(209, 45%, 45%)', direction: 'top'

License

Copyright © Noel Delgado.

Licensed under the MIT License