ASWCode | Gradient Background Animation CSS Snippet

Gradient Background Animation

This snippet demonstrates how to create a fully animated gradient background using only CSS. By utilizing the linear-gradient property combined with keyframe animations, you can generate a dynamic, continuously moving background effect. This type of background is perfect for hero sections, landing pages, or banners, giving your website a modern and visually engaging look without using any JavaScript. You can customize the colors, speed, and direction to fit your project’s theme. This snippet is optimized for responsiveness and performance, ensuring smooth animations across devices, making it an essential tool for web developers looking to enhance their UI/UX design effortlessly.

How to use: Copy and paste into your HTML file.
Change colors: Edit linear-gradient values.
Change speed: Adjust animation duration.

<style>
body {
  height: 100vh;
  background: linear-gradient(-45deg, #ff0080, #00f2ff, #00ff80, #ffcc00);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>