Animated Gradient Background Using Html Css

MUAZHAN

4 min read

·

Jun 28, 2024

43

Share

Animated Gradient Background using HTML CSS

This article will guide you through creating an animated gradient background using HTML and CSS. This is a simple yet effective way to add a dynamic and visually appealing touch to your website or web application.

HTML Structure

First, we'll create a simple HTML structure to hold our background. You can use a <div> element for this purpose.

CSS Styling

Now, let's style our background using CSS. We'll create a linear gradient with two colors and add a keyframe animation to make it move.

.container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, #ff5f6d, #ffc371);
  animation: gradientAnimation 5s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Explanation:

• .container: This class styles the div element.

  • width: 100%; and height: 100vh; make the container span the entire browser window.
  • background: linear-gradient(to right, #ff5f6d, #ffc371); sets the background to a linear gradient going from right to left. You can customize the colors as per your design needs.
  • animation: gradientAnimation 5s ease infinite; applies the gradientAnimation keyframe animation with a duration of 5 seconds, an easing function of ease, and infinite repetitions.

• @keyframes gradientAnimation:

  • 0%, 50%, and 100% define the keyframes for the animation.
  • background-position is used to control the movement of the gradient.
  • We adjust the background-position values to shift the gradient from left to right and back again, creating a smooth animation.

Customization

You can further customize this animation by:

• Changing Gradient Colors: Experiment with different color combinations to create unique effects.
• Adjusting Animation Duration: Modify the animation-duration property to speed up or slow down the animation.
• Adding More Keyframes: Introduce more keyframes to create complex animation patterns.
• Using Different Gradient Directions: Experiment with linear-gradient(to top) or linear-gradient(to bottom) for vertical gradients, or radial-gradient() for circular gradients.

This is a basic example of an animated gradient background. You can expand upon it by adding more complex animations, transitions, and interactions for a truly captivating visual experience.