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.
3 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
ReplyEmoticonEmoticon