# linear-gradient-text

> A simple library for creating gradient-filled texts.

Latest version **1.0.3** (published 2020-02-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install linear-gradient-text
pnpm add linear-gradient-text
yarn add linear-gradient-text
bun add linear-gradient-text
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-02-05 |
| First published | 2020-02-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Dawid Owczarz |
| Maintainers | meracle |
| Keywords | linear-gradient, linear, gradient, text |

## Links

- npm: https://www.npmjs.com/package/linear-gradient-text
- Repository: https://github.com/dawidow/linear-gradient-text
- Homepage: https://github.com/dawidow/linear-gradient-text#readme
- Issues: https://github.com/dawidow/linear-gradient-text/issues
- npm.io page: https://npm.io/package/linear-gradient-text

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.3 (latest) — 2020-02-05
- 1.0.2 — 2020-02-05
- 1.0.1 — 2020-02-05
- 1.0.0 — 2020-02-05

## README

You can find the library on [npmjs](https://www.npmjs.com/package/linear-gradient-text)

# 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.

---
_Source: https://npm.io/package/linear-gradient-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._