How to Create Animated Background using CSS3 ? Last Updated : 24 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 this section, we will design the basic structure of the body. HTML <!DOCTYPE html> <html> <head> <title> Create Animated Background using CSS3 </title> </head> <body> <div class="container"> <input id="enter" type="textbox" placeholder="USERNAME"> <input id="enter" type="password" placeholder="PASSWORD"> <button id="submit" type="button" > <span id="span">SUBMIT</span> </button> <br> <div id="forget"> <a href="">Create Account</a> <a href="">Forget Password?</a> </div> </div> </body> </html> CSS code: In this section, we are using some CSS property to design background animation. We are using linear-gradient() method and animation property to design background. css <style> body { display:flex; justify-content: center; align-items: center; background-image:linear-gradient(155deg, white, violet, blue, lightblue); background-size:450%; animation:bganimation 15s infinite; } input { margin-bottom: 16px; outline:none; } .container { background-image:radial-gradient(orange, tomato); height:300px; width:350px; border:black 1.5px solid; border-radius: 5%; /*box-shadow: 8px 8px 50px black; */ display:flex; justify-content:center; align-items:center; flex-direction: column; } #submit { outline:none; color:black; height:31px; width:90px;; border-radius:20px; border-style:none; background-color:yellow; font-weight:550; } #submit:hover { transition:1s; font-weight:550; background-color:red; border:2px solid yellow; color:white; } #enter { color:black; height:32px; width:250px; text-align: center; font-size: small; border-top-left-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; border-style:none; background-color:yellow; } #enter:hover { transition:0.4s; background-color:pink; } img[alt="www.000webhost.com"] { display:none; } a { font-weight:500; font-family:monospace; font-size:105%; text-decoration:none; color:black; } a:hover { text-decoration:underline; } a:first-child { margin-right: 28px; } @keyframes bganimation { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } </style> Combining Code: In this section, we will combine both HTML and CSS code to make a background animation. html <!DOCTYPE html> <html> <head> <title> Create Animated Background using CSS3 </title> <style> body { display: flex; justify-content: center; align-items: center; background-image: linear-gradient(155deg, white, violet, blue, lightblue); background-size: 450%; animation: bganimation 15s infinite; } input { margin-bottom: 16px; outline: none; } .container { background-image: radial-gradient(orange, tomato); height: 300px; width: 350px; border: black 1.5px solid; border-radius: 5%; /*box-shadow: 8px 8px 50px black; */ display: flex; justify-content: center; align-items: center; flex-direction: column; } #submit { outline: none; color: black; height: 31px; width: 90px; ; border-radius: 20px; border-style: none; background-color: yellow; font-weight: 550; } #submit:hover { transition: 1s; font-weight: 550; background-color: red; border: 2px solid yellow; color: white; } #enter { color: black; height: 32px; width: 250px; text-align: center; font-size: small; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; border-style: none; background-color: yellow; } #enter:hover { transition: 0.4s; background-color: pink; } img[alt="www.000webhost.com"] { display: none; } a { font-weight: 500; font-family: monospace; font-size: 105%; text-decoration: none; color: black; } a:hover { text-decoration: underline; } a:first-child { margin-right: 28px; } @keyframes bganimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> </head> <body> <div class="container"> <input id="enter" type="textbox" placeholder="USERNAME"> <input id="enter" type="password" placeholder="PASSWORD"> <button id="submit" type="button"> <span id="span">SUBMIT</span> </button> <br> <div id="forget"> <a href="">Create Account</a> <a href="">Forget Password?</a> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create Candle Animation using CSS ? H helloajaysingh1 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Create Wave Background using CSS? A wave background is a design element having wavy patterns or shapes used to add movement in the web pages. The :before pseudo-element can be used to create a wavy background by applying it to an element and using CSS properties like clip-path to create wave shapes.Using :before pseudo-elementTo cre 2 min read How to Create Border Animation using CSS? Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction. 2 min read How to create Candle Animation using CSS ? To create Candle animation, we take the basic approach of Pure CSS., Here we are using some animation techniques like move and rotate to create the Candle more effectively.Approach: First we create a container class. In container class, we create another class named candle-body and in this class, we 3 min read How to create texture background using CSS ? Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi 3 min read How to Create a Sliding Background Effect Using CSS ? A sliding background effect in CSS creates a smooth, continuous movement of a webpageâs background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional Java 2 min read How to Create Animation Loading Bar using CSS ? Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s 3 min read Like