How to Animate Gradient Background Smoothly Using CSS ? Last Updated : 18 Apr, 2025 Comments Improve Suggest changes Like Article Like Report Animating gradient backgrounds smoothly using CSS means setting a gradient background and using transitions or keyframe animations to create gradual changes in colors, angles, or positions. This technique adds a dynamic and visually attractive effect to enhance the webpage's design.What is Gradients?Gradients are smooth transitions between colors, used for depth and visual effects. In CSS, they are created using the background-image property with linear-gradient() or radial-gradient() functions to blend colors seamlessly.Approach to animate gradient background smoothlyCreate HTML Divs: Begin by creating an HTML structure with one more div than the number of gradients you want. The extra div serves as the main layer with all the colors, to which we’ll add the animation.Define Background: Use linear-gradient() to create a gradient background for animation.Set Animation: Apply animation with keyframes to transition the background smoothly.Keyframes Setup: Use @keyframes to define the sliding animation from -25% to 25%.Add Layers: Create multiple background layers with different animation durations for depth.Positioning: Fix the backgrounds and adjust z-index to place them behind content.Syntax@keyframes animation_name { keyframes-selector { css-styles; }}Example: Here we are following the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { display: grid; place-items: center; color: yellow; } .main__bg { background-image: linear-gradient(-60deg, #404258 50%, #6B728E 50%); animation: slide 3s ease-in-out infinite alternate; position: fixed; top: 0; bottom: 0; left: -50%; right: -50%; opacity: 0.5; z-index: -1; } .layer1 { animation-direction: alternate-reverse; animation-duration: 4s; } .layer2 { animation-duration: 5s; } @keyframes slide { 0% { transform: translateX(-25%); } 100% { transform: translateX(25%); } } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> Animate gradient background smoothly using CSS </h2> <div class="main__bg"></div> <div class="main__bg layer1"></div> <div class="main__bg layer2"></div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Animate Gradient Background Smoothly Using CSS ? S satyamm09 Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2022 CSS-Questions +1 More Similar Reads How to create linear gradient background using CSS ? In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitio 4 min read How to Create Animated Background using CSS3 ? Pre-requisite:Basic html Learn HTMLcss Learn cssYou will need to have a basic knowledge of Keyframes with css Learn Keyframes In this article, we are creating the background animation using CSS. The login form is used as a demo and the main intention to design background animation. HTML code: In thi 3 min read How to Create a Gradient Shadow using CSS ? A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e 2 min read How to combine background-image and gradient on the same element using CSS3 ? Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. It describe 2 min read How to apply gradient as the mask using CSS ? In this article, we will learn how to include the gradient as the mask layer in CSS, along with understanding their basic implementation with the help of suitable examples. The Mask Property with a Gradient is used to create a mask layer, that can be utilized for rendering or hiding the area of the 3 min read Like