CSS Gradient Background | Animation Pure CSS Moving Gradient
In this tutorial, we learn how to create moving CSS Gradient Background using Pure CSS | Animation Pure CSS Moving Gradient?
this program is a simple moving gradient for on any element, or background. basically gradient is a mixture of more the one color, which we can create for background in easily way with using pure CSS. if you are beignner you don’t know about what is gradient? lets me explain.
Basically, Gradient is CSS elements of the image data type which shows a transition between more then one colors. these transitions are always shown as either radial or linear. Gradient mostly used for background element.
Today you will learn in this tutorial, moving gradient background for website, Gradients allow you, to explore new opportunities for the designer to provide, clean design and fresh for the audience. after seeing this CSS gradient background program, you can understand how CSS Gradients work.
Linear Gradients
transitions in linear gradients which occur along a straight line determined by direction or an angle. A CSS linear Gradient can be coded by using the function linear-gradient(). only you need two colors to get started. you can add more colors, directions, angles.
|
1 |
background-image: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%); |
Radial Gradients
A CSS radial gradient, it is just as beautiful and fun as linear-gradient and you can be implemented just as easy way. we can say that the code may seem more difficult to figure out at first, it may be easier to start out with a linear gradient.
|
1 |
background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%); |
so, today I am sharing CSS Gradient background program, here I will apply normal linear gradient on the body with Moving animation, that the reason I am called it animated CSS background gradient.
therefore for creating this program I have used simple CSS properties like background-size, animation, Linear-gradient,-WebKit-animation, background-position.
Explanation of Source Code For CSS Gradient Background | Animation Pure CSS Moving Gradient
Let’s discuss the source code first before sharing the source code, I have created one div and put all elements such as heading, paragraph, inside the div. therefore for the font, I have used google font (get) for styling paragraph and heading.
furthermore in the stylesheet, I have placed gradient on the body tag. for creating gradient effect I have used a linear gradient with four colors and -55 degrees angle. if you see in the style sheet the whole command looks like this background: linear-gradient(-55deg, #99f2c8, #1f4037, #FF0099, #f64f59);
therefore for paragraph styling, I have used some CSS command like as:-
|
1 2 3 4 5 |
text-align: justify; position: absolute; line-height: 30px; left: 15%; right: 15%; |
therefore, after that I have created @-webKit-keyframes gradientBackground and @keyframes gradientBackground using CSS like as:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@-webkit-keyframes gradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } |
for creating CSS Gradient Background program you need to create two files, the first file for HTML and Second file for CSS. I hope you will learn these program and when you get the code you will understand in a better way.
First Step: Create HTML file as the name “index.html” | Change file name as you want
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Gradient Background | Tutorialscan.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Exo&display=swap'> <link rel="stylesheet" href="css/stylesheet.css"> </head> <body> <div class="container"> <h1>CSS Animated Gradient Background</h1> <p >There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p> </div> </body> </html> |
Second File: Create CSS file as Name “stylesheet.css” | Change file name as you want
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
body { margin: 0; width: 100%; height: 100vh; font-family: sans-serif; /*background-image: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);*/ color: #fff; background: linear-gradient(-55deg, #99f2c8, #1f4037, #FF0099, #f64f59); background-size: 400% 400%; -webkit-animation: gradientBackground 10s ease infinite; animation: gradientBackground 10s ease infinite; } .container { width: 100%; position: absolute; top: 35%; text-align: center; } h1 { font-weight: 900; font-family: sans-serif; font-size: 30px; } p{ text-align: justify; position: absolute; line-height: 30px; left: 15%; right: 15%; } a { text-decoration: none; color: #fff; } @-webkit-keyframes gradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } |
you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.
About Author
