background wave effects || background color gradient || background gradient color css
Description-.-
Hi, thanks for watching our video about background wave effects || background color gradient || background gradient color css!
In this video we’ll walk you through:
* Background gradient color
* Animated color effects waves
* Only css ABOUT OUR CHANNEL
Our channel is about coding-related. We cover lots of cool stuff such as "HTML", "CSS" , "Bootstrap 5" and "React with Java Script".
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Gradient Background Color with waves</title>
</head>
<body>
<div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</body>
</html>
CSS
body
{
margin: 0;
font-family: -apple-system, BlinkMackSystemFont, sans-serif;
overflow: auto;
background: linear-gradient(315deg,
rgba(101,0,94,1)3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
animation: gradient 15s ease infinite;
background-size: 400% 400%;
background-attachment: fixed;
}
@keyframes gradient {
0%{
background-position: 0% 0%;
}
50%{
background-position: 100% 100%;
}
100%{
background-position: 0% 0%;
}
}
.wave
{
background: rgb(255 255 255 / 25%);
border-radius: 1000% 1000% 0 0;
position: fixed;
width: 200%;
height: 12em;
animation: wave 10s -3s linear infinite;
transform: translate(0,0, 0);
position: 0.8;
bottom: 0;
left: 0;
z-index: -1;
}
.wave:nth-of-type(2){
bottom: -1.25em;
animation: wave 18s linear reverse infinite;
opacity: 0.8;
}
.wave:nth-of-type(3){
bottom: -2.5em;
animation: wave 20s -1s reverse infinite;
opacity: 0.9;
}
@keyframes wave{
2%{
transform: translate(1);
}
25%{
transform: translate(-25%);
}
50%{
transform: translate(-50%);
}
75%{
transform: translate(-25%);
}
100%{
transform: translate(1);
}
}
