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.

https://youtu.be/X6-IfUUDYNE

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>
ESCRIBE AQUÍ TUS CONSULTAS O PREGUNTAS Y TE RESPONDEREMOS EN BREVE

Escribe tu pregunta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *