In this Blog, we are going to learn how to create Animated Background using CSS and HTML. First of all, create an HTML File and paste the below code. HTML CODE: <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name="robots" content="noindex"> </head> <body> <div class="context"> <h1>Animated Background Using CSS</h1> </div> <div class="area" > <ul class="circles"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div > </body> </html> Now create a CSS file and paste the below code. @import url('https://fonts.googleapis.com/css?family=Exo:400,700'); *{ margin: 0px; padding: 0px; } body{ font-family: 'Exo', sans-serif; } .context { width: 100%; position: absolute; top:50vh; } .context h1{ text-align: center; color: #fff; font-size: 50px; } .area{ background: #4e54c8; background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); width: 100%; height:100vh; } .circles{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .circles li{ position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.2); animation: animate 25s linear infinite; bottom: -150px; } .circles li:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; } .circles li:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .circles li:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; } .circles li:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .circles li:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; } .circles li:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .circles li:nth-child(7){ left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .circles li:nth-child(8){ left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .circles li:nth-child(9){ left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .circles li:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } @keyframes animate { 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } Output: Download Source Code Demo Share this:Click to share on Twitter (Opens in new window)Click to share on Facebook (Opens in new window)Click to print (Opens in new window)Click to share on LinkedIn (Opens in new window)Click to share on Telegram (Opens in new window)Click to share on WhatsApp (Opens in new window)Like this:Like Loading... Post navigation 3D Rotating Navigation Morphing Modal Window Using HTML, CSS & Javascript