Animated Background Html Css Code

MUAZHAN

4 min read

·

Jun 28, 2024

33

Share

Animated Background with HTML & CSS

This article will guide you on creating an animated background using HTML and CSS. We'll focus on creating a simple, yet effective animation using CSS transitions and keyframes. Let's get started!

Setting Up the HTML Structure

Firstly, we'll define a simple HTML structure. We'll use a div element as our background container:

Styling with CSS

Now, let's add the CSS styles. We'll focus on creating a simple gradient background that animates with a smooth transition.

.background {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #00d2ff, #3a7bd5);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

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

Explanation:

• position: fixed;: This makes the background fixed to the viewport, meaning it stays in place even when scrolling.
• top: 0; left: 0;: This positions the background at the top-left corner of the viewport.
• width: 100%; height: 100%;: This ensures the background covers the entire viewport.
• background: linear-gradient(to right, #00d2ff, #3a7bd5);: This sets the background to a linear gradient with two colors.
• background-size: 400% 400%;: This sets the size of the gradient, making it larger than the viewport to enable the animation effect.
• animation: gradient 15s ease infinite;: This applies the gradient animation to the background.
• @keyframes gradient: This defines the keyframes for the gradient animation.
  • 0%, 50%, 100%: These are the keyframes at different points in the animation.
  • background-position: This property defines the position of the gradient. The animation smoothly changes the background position to create a visual effect.

Customization

You can customize this basic animation by:

• Changing the background colors: Experiment with different colors to create various visual effects.
• Adjusting the animation duration: Modify the animation-duration property in the animation declaration to change the speed of the animation.
• Adding more keyframes: You can add more keyframes to the animation to create more complex transitions.
• Using different background images: You can use images instead of gradients, and animate their positions or other properties.

This is a simple example of how to create an animated background using HTML and CSS. With these basic principles, you can create various engaging visual effects for your websites or web applications. Remember to experiment and explore different techniques to achieve the desired results.