Fondo animado con colores gradient – CSS puro – Tutorial
Vamos a crear un background con linear gradient y animaciones para que el fondo cambie gradualmente de colores.
Código HTML y CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 100%;
height: 100vh;
color: #fff;
background: linear-gradient(45deg,red,blue,green,black);
background-size: 400% 400%;
position: relative;
animation: cambiar 10s ease-in-out infinite;
}
h1{
font-size: 4rem;
letter-spacing: 2px;
border: solid 3px #fff;
border-radius: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 2rem 3rem;
}
@keyframes cambiar{
0%{background-position: 0 50%;}
50%{background-position: 100% 50%;}
100%{background-position: 0 50%;}
}
</style>
</head>
<body>
<section>
<h1>HTML & CSS</h1>
</section>
</body>
</html>