Generating the gradient background in CSS
The gradient CSS property can be used for the smooth transition of different colors that otherwise need to be done by using images.
You may use the gradient property for different reasons; one of the purposes is to use it as background for the whole web page or different elements.
In this tutorial, I am going to show you live demos and code for gradient background CSS properties.
A demo of animated background gradient
See the demo online where magenta, cyan, and white colors are used for linear gradients with different times of animation. It also used @-webkit-keyframes for hue with different angle values:
See online demo and code
The .div-gradient class defines the gradient along with its child elements, for example, this is the second div element:
.div-gradient:nth-child(2) { box-shadow: 0 0 45vmax 45vmax magenta; -webkit-animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite; animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite; }
You can see, it defines the box-shadow, webkit-animation where the linear gradient is used. Similarly, other div element properties are set by using these and animation, etc.
Get the complete code, including HTML and compiled CSS from the demo page.
A demo with other color combinations and angles
In this demo, only the colors are changed along with different angles for hue-rotate and time of the animation.
Complete code:
<!DOCTYPE html> <html> <head> <style> body { background: #000; } h1 { position: absolute; width: 100%; text-align: center; top: 48vh; color: #fff; font-family: 'Trebuchet MS', Helvetica, sans-serif; letter-spacing: .7em; font-size: 20pt; font-weight: normal; opacity: .2; text-transform: uppercase; } .div-gradient { position: absolute; width: .001vmin; height: .001vmin; border-radius: 50%; opacity: .25; } .div-gradient:nth-child(2) { box-shadow: 0 0 45vmax 45vmax #408080; -webkit-animation: hue 20s 0s linear infinite, move1 19s 0s linear infinite; animation: hue 20s 0s linear infinite, move1 19s 0s linear infinite; } .div-gradient:nth-child(3) { box-shadow: 0 0 45vmax 45vmax #400000; -webkit-animation: hue 35s 0s linear infinite, move2 25s 0s linear infinite; animation: hue 35s 0s linear infinite, move2 25s 0s linear infinite; } .div-gradient:nth-child(4) { box-shadow: 0 0 45vmax 45vmax #008000; -webkit-animation: hue 10s 0s linear infinite, move3 15s 0s linear infinite; animation: hue 10s 0s linear infinite, move3 15s 0s linear infinite; opacity: .2; } @-webkit-keyframes hue { 0% { -webkit-filter: hue-rotate(10deg); filter: hue-rotate(45deg); } 100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } } @keyframes hue { 0% { -webkit-filter: hue-rotate(10deg); filter: hue-rotate(45deg); } 100% { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } } @-webkit-keyframes move1 { 0% { top: 0vh; left: 50vw; } 25% { left: 0vw; } 50% { top: 100vh; } 75% { left: 100vw; } 100% { top: 0vh; left: 50vw; } } @keyframes move1 { 0% { top: 0vh; left: 50vw; } 25% { left: 0vw; } 50% { top: 100vh; } 75% { left: 100vw; } 100% { top: 0vh; left: 50vw; } } @-webkit-keyframes move2 { 0% { top: 50vh; left: 100vw; } 25% { top: 100vh; } 50% { left: 0vw; } 75% { top: 0vh; } 100% { top: 50vh; left: 100vw; } } @keyframes move2 { 0% { top: 50vh; left: 100vw; } 25% { top: 100vh; } 50% { left: 0vw; } 75% { top: 0vh; } 100% { top: 50vh; left: 100vw; } } @-webkit-keyframes move3 { 0% { top: 100vh; left: 50vw; } 25% { left: 100vw; } 50% { top: 0vh; } 75% { left: 0vw; } 100% { top: 100vh; left: 50vw; } } @keyframes move3 { 0% { top: 100vh; left: 50vw; } 25% { left: 100vw; } 50% { top: 0vh; } 75% { left: 0vw; } 100% { top: 100vh; left: 50vw; } } </style> </head> <body> <h1>A demo of background gradient</h1> <div class="div-gradient"></div> <div></div> <div></div> </body> </html>
Credit: here