How to Create Gradient Background Animation using HTML and CSS ? Last Updated : 26 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Gradient animation can be added to the background of your websites by using simple HTML and CSS @keyframes rule that generate the desired animation.HTML Code: In the following example, the basic structure of the HTML page is implemented. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Gradient Background Animation</title> </head> <body> <section> <div> <h2>GeeksforGeeks</h2> <p>Gradient background Animation</p> </div> </section> </body> </html> CSS Code: In the following section, designing of the background is implemented using simple CSS @keyframes rule that provide the animation feature. Providing different gradient colors is done using linear-gradient() function. CSS <style> body { margin: 0; padding: 0; animation: effect 3s linear infinite; } section { width: 100%; height: 100vh; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; } h2 { text-align: center; } @keyframes effect { 0% { background: linear-gradient(#008000, #00FF00); } 50% { background: linear-gradient(#220080, #0084ff); } 100% { background: linear-gradient(#e78f3c, #ff4800); } } </style> Complete Code: It is the combination of the above two code sections. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Gradient Background Animation</title> </head> <style> body { margin: 0; padding: 0; animation: effect 3s linear infinite; } section { width: 100%; height: 100vh; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; } h2 { text-align: center; } @keyframes effect { 0% { background: linear-gradient(#008000, #00FF00); } 50% { background: linear-gradient(#220080, #0084ff); } 100% { background: linear-gradient(#e78f3c, #ff4800); } } </style> <body> <section> <div> <h2>GeeksforGeeks</h2> <p>Gradient background Animation</p> </div> </section> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create Gradient Background Animation using HTML and CSS ? L lakshgoel204 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Animate Gradient Background Smoothly Using CSS ? 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 2 min read 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 Text Color Animation using HTML and CSS ? The text color can be changed according to the programmerâs choice using CSS @keyframes rule. In this article, we will see how to create text color animation using HTML and CSS. Preview:Approach:Create an HTML file with a centered <div> containing an <h2> element.Use CSS to reset default 1 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 progress bar animation using HTML and CSS ? In this mini Web Development project we will utilize CSS animations and create a progress bar using them. The progress bar will start from zero and go to a certain extent as we want. The progress bar is basically showing the expertise of a programmer in different languages in animated form. Prerequi 3 min read Like