linear-gradient-text v1.0.3

You can find the library on npmjs

What is that ?

A simple library for creating gradient-filled texts.

How to use ?

npm i linear-gradient-text

Then...

In html just add a simple class...

class="gradient-text"

...and configure it in javascript

import { gradientText } from 'linear-gradient-text';

gradientText({
	primaryColor: '#323',
	secondaryColor: '#e2e',
	direction: 'bottom',
})

Of course, please specify your own properties as a value.

Options

lineargradienttext supports 3 options, each of which is optional.

• primaryColor - '#color' (Defaults to #fff (white))
• secondaryColor - '#color' (Defaults to #000 (black))
• direction - 'top' | 'right' | 'bottom' | 'left' (Defaults to bottom)*

* - Read the important section

IMPORTANT!

When using a single word that has display by default: block. The gradient works but fills all available space. It is then recommended to use display: inline.

This problem only affects left and right directions.