https://github.com/wesselvandalen/react-typography-gradient
A React library that allows you to easily create gradients for your typography.
https://github.com/wesselvandalen/react-typography-gradient
javascript library npm react
Last synced: 6 months ago
JSON representation
A React library that allows you to easily create gradients for your typography.
- Host: GitHub
- URL: https://github.com/wesselvandalen/react-typography-gradient
- Owner: wesselvandalen
- Created: 2025-12-03T22:19:35.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-12-04T22:49:25.000Z (7 months ago)
- Last Synced: 2025-12-15T05:23:26.861Z (7 months ago)
- Topics: javascript, library, npm, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-typography-gradient
- Size: 23.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-typography-gradient
Always wanted those smooth Apple gradient texts, but not the frustration of CSS? React-typography-gradient is a library for React, which allows you to create clean, light-weight and easy-to-use gradients for your typography.
## Installation
```bash
npm install react-typography-gradient
```
## Usage
Import the function you wish to use from the [functions](#functions) section, and use like so:
```jsx
// Import the function.
import createGradient from "react-typography-gradient";
// Creates a purple-blue ish gradient for your text element.
const purple_blue = createGradient(["#e022f5", "#3cc1ff", "#2278db"]);
// Use it as a style attribute.
React-typography-gradient
```
Result:
## Functions
### createGradient(colors: string[])
Returns you a gradient for your text, depending on the colors in the parameter. Parameter colors supports hex, rgb, HSL/HSLA, HWB and LCH and LAB.
```jsx
const purple_blue = createGradient(["#e022f5", "rgb(60 193 255)", "hsl(300, 100%, 50%, .3)", "lab(50 80 30)"]);
```