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