How to Create a Background Gradient Animation with Text in ReactJS

Hey dear react coders, you know very well Creating a eye-catching web pages with engaging animations can significantly improve the user experience. One common technique to bring some visual interest to your site is using a background gradient animation with overlay text.

Through this blog post, we’ll walk how to create such an effect using ReactJS for structure and CSS animations for style.

By the end of this tutorial, you will have a dynamic background gradient that smoothly transitions between colors, overlaid by text. Whether you’re a beginner in ReactJS or simply looking to add some flair to your site, this tutorial will help you achieve a modern, animated look. So, Lets go.

Why Use Background Gradient Animations?

Background gradient animations can make your website feel more interactive and visually appealing. They offer a subtle but powerful effect that captures the user’s attention without overwhelming them.

Animating a gradient background is a great way to:

• Add visual interest to an otherwise static page.
• Highlight text or important sections of your website.
• Improve the user experience by making the design more modern.

Step-by-Step Guide to Building a Background Gradient Animation with Text in ReactJS

1. Setting Up the React Environment

If you don’t have a React app yet, the first step is creating one. If you’ve already got a React project, feel free to skip to the next step.

In case you’re new to React or just setting up a fresh environment, follow these commands:

npx create-react-app gradient-animation
cd gradient-animation
npm start

This will create a new React app and start a local server where you can preview the app as you build it.

2. Creating the React Component

In React, everything is organized into components. We’ll start by creating a simple component that displays the background gradient animation with overlaid text.

Open the src/App.js file and replace its content with the following code:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="gradient-background">
      <h1 className="animated-text">Welcome to My Animated Site</h1>
    </div>
  );
}

export default App;

Here, we’re using a div element that will serve as the container for our animated background. Inside that div, we’ve placed a h1 tag with some sample text. Next, we’ll bring this to life with some CSS magic.

3. Adding CSS for the Background Animation

Now that we have the structure of the React component ready, let’s define the CSS that will animate the background and style the text.

Open the src/App.css file and add the following styles:

/* Fullscreen container with animated gradient */
.gradient-background {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
}

/* Keyframes for gradient animation */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Styling for the text */
.animated-text {
  font-size: 3rem;
  color: white;
  font-family: 'Arial', sans-serif;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Let’s break this down:

• .gradient-background: This CSS class is applied to the div container. It uses a linear-gradient that transitions between four colors. The background-size: 400% 400% makes the gradient larger than the viewport so it can move smoothly during the animation.
• @keyframes: The gradientAnimation uses keyframes to animate the gradient’s background position over time. It starts at 0%, moves to 100% (covering the full width), and then loops back. This creates a seamless animation as the colors shift from left to right.
• .animated-text: The text is centered and styled with a white color, some shadow, and a larger font size. It is made prominent to stand out against the gradient background.

4. Running the Application

Now that you’ve set up the component and the styles, it’s time to run the app and see the result!

If your app isn’t already running, you can start it by running the following command:

npm start

This will open the app in your default browser. You should see a background gradient smoothly shifting between colors with text centered in the middle of the screen.

Customizing the Animation

There are several ways to customize this animation to fit your project’s style:

• Change the colors: You can modify the colors in the linear-gradient to match your website’s branding or create more dramatic color shifts. For instance, you can change the colors to cooler shades like blue and green.

background: linear-gradient(-45deg, #36d1dc, #5b86e5, #2a5298, #0f2027);

Adjust the speed: The animation property controls how fast the animation occurs. By adjusting the 15s duration, you can make the gradient shift slower or faster.

animation: gradientAnimation 20s ease infinite; /* Slower animation */

• Change text styling: You can modify the size, color, and style of the text. For example, you could apply a gradient to the text itself, use different fonts, or add more text-shadow effects.

Using External CSS Libraries

To enhance your text and layout, consider using libraries like Tailwind CSS or Bootstrap. These frameworks make it easy to apply utility classes that will simplify customization.

Conclusion

Creating a background gradient animation with text in ReactJS is not only simple but also adds a modern touch to your web projects. By combining React’s component structure with CSS animations, you can easily implement dynamic and visually appealing designs.

The technique outlined in this article is flexible and can be customized to fit a variety of styles, whether you’re aiming for something subtle or more attention-grabbing. Play around with the colors, speed, and text to make it your own!

This simple but effective animation can make your site more engaging and leave a lasting impression on your visitors. So, go ahead and give it a try on your next project!