How to create Animated Background using CSS only?
In this article, we'll create a movable gradient animation that gives a beautiful animation effect.
![]() |
CSS Animated Background |
Hello and welcome back friends to the CodingTuting with Jignesh Panchal. I hope you like our last post Lets get started.
What is the CSS Gradient?
Gradients are the combination of multiple colors that display a smooth transition between all selected colors.
And we'll select 3 colors for the background and 4 colors for the heading. All 3 backgrounds move from left to right and right to left which gives a beautiful CSS background effect. The same work has done for the heading.
Preview of Animated Background CSS Gradient
CSS Gradient Background Animation and Source Code
As you know, I always give a summary of the source code before share it. See How I did this? Don't be hurry for source code.
I'm using Google Fonts in my code. You can use it too or any others as you like.
- I take a title in <h1> tag and placed it in an <div>
- I aligned center from vertically and horizontally using CSS Flex.
- I gave a gradient background with 3 colors to the title. Then increase the size of background 400%
- Defined a @keyframe animation for changing the background-position.
- Finally, apply that animation in the <h1> with infinity time.
MovingBackground.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Lato|Nanum+Gothic:700|Raleway&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="StyleBackground.css"> <title>Animated Background</title> </head> <body> <div class="main-container"> <h1 id="heading">CodingTuting</h1> </div> </body> </html>
StyleBackground.css
/*Code by CodingTuting.Com*/ * { margin:0; padding: 0; } .main-container { position:relative; background-image: -webkit-gradient(linear, left top, right top, from(#E91E63), color-stop(#673AB7), to(#24eb60)); background-image: linear-gradient(to right, #E91E63, #673AB7, #24eb60); background-size: 500%; -webkit-animation:moveBackground 5s ease-in-out infinite; animation:moveBackground 5s ease-in-out infinite; } #heading { font-family: roboto; font-size: 70px; font-weight:800; height:100vh; letter-spacing: 5px; color: #181873; text-transform: uppercase; margin: 0; padding: 0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: linear-gradient(-45deg, #ffffff, rgb(234, 255, 139), rgb(87, 255, 109), rgb(98, 224, 255)); color: transparent; background-size: 400% 400%; background-clip: text; -webkit-background-clip: text; -webkit-animation: moveBackground 5s ease infinite; animation: moveBackground 5s ease infinite; } @-webkit-keyframes moveBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes moveBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
So, this was the simple CSS Gradient Background Animation. Did you like it? Do comment, please. And ask freely if you have any doubt.
4 Comments
Write CommentsI wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. dice for dungeons and dragons
ReplyExcellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. d&d dice sets
ReplyWhen you use a genuine service, you will be able to provide instructions, share materials and choose the formatting style. fabbri shop online
ReplyHarrah's Cherokee Casino & Hotel Map & Floor Plans - Mapyro
ReplyHarrah's Cherokee Casino 부천 출장마사지 & Hotel is located in the heart 영주 출장마사지 of the Great Smoky 부산광역 출장안마 Mountains of Western North Carolina. The hotel is owned by 익산 출장마사지 Vici 당진 출장마사지 Properties and operated
EmoticonEmoticon