Hola, en este post, vamos a ver la manera de crear un fondo degradado usando HTML y CSS. Aquà les dejo un video relacionado con este sencillo tutorial, y debajo encontraran como hacerlo.
Fondo en HTML y el degradado CSS
Para comenzar, vamos a crear una pagina HTML simple y dentro del cuerpo «<body>» de la pagina agregaremos un contenedor y un titulo, solo como representacion.
El HTML
<div class="bg">
<h1>Fondo degradado en CSS</h1>
</div>El Estilo degradado CSS
Lo siguiente sera crear el estilo que nos permitirá crear el degradado del fondo, el cual se lo agregaremos al contenedor con clase «bg», el cual representa el fondo.
<style>
.bg{text-align: center;min-height: 750px; background-image: linear-gradient(to right, #182e46, #1f3952, #182e46, #1f3952, #182e46);padding: 0;margin: 0;position:relative;}
h1{color: white;position: absolute;top: 50%;transform: translate(-50%, -50%);margin: auto;left: 50%;font-size: calc(3.5*3vw);}
</style>Como verán, «background-image» es la que permitirá la creación del degradado. Para este, usamos «linear-gradient». Esta función crea una imagen que consiste en una transición progresiva entre dos o mas colores.
La forma mas simple de esta función es usar dos colores como:
background-image: linear-gradient(#e66456, #ff5482);Tambien se puede usar la opción de rotar el degradado usando un numero desde 1 hasta 359 grados:
background-image: linear-gradient(45deg, #e66456, #ff5482);En una dirección especifica:
background-image: linear-gradient(to left top, #e66456, #ff5482);Sin mas con esto, de manera sencilla, podemos crear degradados simples para fondos. Con nuestro código de ejemplo de arriba, el resultado va a ser el siguiente presentado aquà abajo.
