Text Gradients and Animations for React

Easily apply linear, radial, or conic text gradients to your React applications with only 3 components!

Add text gradient animations instantly!

No limit on color stops!

Demo

Installation and Importation

First, install the package:

npm i --save react-text-gradients-and-animations

Then import the LinearTextGradient, RadialTextGradient, or ConicTextGradient in your React application:

import {
  LinearTextGradient,
  RadialTextGradient,
  ConicTextGradient,
} from "react-text-gradients-and-animations";

LinearTextGradient

The LinearTextGradient component is used to apply a linear gradient on text:

<LinearTextGradient angle={45} colors={["#fafa6e", "#39b48e"]}>
  This text has linear gradient!
</LinearTextGradient>

The component can be used inside any HTML element tags.

If you input HTML element tags as children of LinearTextGradient, you will not see an output. To fix this, the LinearTextGradient component (or its parent component) must contain a display property (flex, inline-flex, etc.).

Note: Refresh the browser if the text is hidden underneath the background gradient.

Properties

| Prop | Description | Default Value | Type | Required | | ----------------------------- | -------------------------------------------- | ------------- | ------- | ----------------------------------- | | angle | The direction (angle) of the linear gradient | 0 | Integer | False | | colors | Array of colors (>= 2) | - | Array | True | | animate | Allow text gradient to be animated | False | Boolean | False (True if you want animations) | | animateDuration | Seconds it takes to do a full animation loop | 5 | Integer | False | | animateDirection | Direction of animation loop | "vertical" | String | False | | className | Custom CSS styling | - | String | False |

The ability to input as many colors as you need (>= 2) and any angle (0 - 360) for the linear gradient grants you more control, and a step closer to achieving your vision!

Types of animateDirection:

• "horizontal"
• "vertical"
• "diagonal" --> infinitely loops from bottom left corner to top right corner

You can also add different intensities for each color:

• "#fafa6e 50%"
• "blue 25%"
• "rgb(255, 0, 0) 75%"

RadialTextGradient

The RadialTextGradient component is used to apply a radial gradient on text:

<RadialTextGradient
  shape={"circle"}
  position={"center"}
  colors={["#fafa6e", "#39b48e"]}
>
  This text has radial gradient!
</RadialTextGradient>

The component can be used inside any HTML element tags.

If you input HTML element tags as children of RadialTextGradient, you will not see an output. To fix this, the RadialTextGradient component (or its parent component) must contain a display property (flex, inline-flex, etc.).

Note: Refresh the browser if the text is hidden underneath the background gradient.

Properties

| Prop | Description | Default Value | Type | Required | | ----------------------------- | -------------------------------------------- | ------------- | ------- | ----------------------------------- | | shape | Ending shape of radial gradient | "circle" | String | False | | position | Position of radial gradient | "center" | String | False | | colors | Array of colors (>= 2) | - | Array | True | | animate | Allow text gradient to be animated | False | Boolean | False (True if you want animations) | | animateDuration | Seconds it takes to do a full animation loop | 5 | Integer | False | | animateDirection | Direction of animation loop | "vertical" | String | False | | className | Custom CSS styling | - | String | False |

The ability to input as many colors as you need (>= 2) grants you more control, and a step closer to achieving your vision!

Types of shape:

• "circle"
• "ellipse"

Types of position:

• "center"
• "left"
• "right"
• "top"
• "bottom"
• "75px"
• "40px 40px"
• "25% 50%"
• "0 0"

Types of animateDirection:

• "horizontal"
• "vertical"
• "diagonal" --> infinitely loops from bottom left corner to top right corner

You can also add different intensities for each color:

• "#fafa6e 50%"
• "blue 25%"
• "rgb(255, 0, 0) 75%"

ConicTextGradient

The ConicTextGradient component is used to apply a conic gradient on text:

<ConicTextGradient
  angle={0}
  position={"center"}
  colors={["#fafa6e", "#39b48e"]}
>
  This text has conic gradient!
</ConicTextGradient>

The component can be used inside any HTML element tags.

If you input HTML element tags as children of ConicTextGradient, you will not see an output. To fix this, the ConicTextGradient component (or its parent component) must contain a display property (flex, inline-flex, etc.).

Note: Refresh the browser if the text is hidden underneath the background gradient.

Properties

| Prop | Description | Default Value | Type | Required | | ----------------------------- | -------------------------------------------- | ------------- | ------- | ----------------------------------- | | angle | The direction (angle) of the conic gradient | 0 | Integer | False | | position | Position of conic gradient | "center" | String | False | | colors | Array of colors (>= 2) | - | Array | True | | animate | Allow text gradient to be animated | False | Boolean | False (True if you want animations) | | animateDuration | Seconds it takes to do a full animation loop | 5 | Integer | False | | animateDirection | Direction of animation loop | "vertical" | String | False | | className | Custom CSS styling | - | String | False |

The ability to input as many colors as you need (>= 2) and any angle (0 - 360) for the linear gradient grants you more control, and a step closer to achieving your vision!

Types of position:

• "center"
• "left"
• "right"
• "top"
• "bottom"
• "75px"
• "40px 40px"
• "25% 50%"
• "0 0"

Types of animateDirection:

• "horizontal"
• "vertical"
• "diagonal" --> infinitely loops from bottom left corner to top right corner

You can also add different intensities for each color:

• "#fafa6e 50%"
• "blue 25%"
• "rgb(255, 0, 0) 75%"

Animation Code Example

All animations and animation properties will remain the same regardless of gradient type - (linear, radial, conic).

We will use the LinearTextGradient as our example:

<LinearTextGradient
  angle={90}
  colors={["#fafa6e", "#39b48e"]}
  animate
  animateDuration={10}
  animateDirection={"horizontal"}
>
  This text has an animated linear gradient!
</LinearTextGradient>

Remember, if you want to animate a gradient, you have to input the property animate (or animate={true}).

Since our linear gradient angle is 90 degrees, our colors are appearing in a vertical pattern. The animation works by translating the background, so we should use a horizontal animation direction to make the changing colors visible! (if we use the vertical animation direction, we will see nothing being animated).