Fondo degradado en CSS
Esta guía trivial trata sobre el uso de propiedades CSS que se pueden usar para definir fondos degradados con forma de arcoíris para elementos HTML.
Gradientes CSS
Puede mostrar transiciones fluidas entre dos o más colores específicos utilizando degradados CSS. CSS identifica tres tipos de gradientes diferentes:
- Gradientes lineales (se mueve hacia la izquierda, derecha, arriba, abajo, en diagonal)
- Gradientes redondeados (definidos por su centro)
- Gradientes CONIC (gira alrededor de un punto central)
Los degradados se pueden usar en fondos y en cualquier otro lugar donde se usaría una imagen. Los degradados pueden eliminar la necesidad de los archivos de imagen de gráficos de mapa de bits utilizados anteriormente para adquirir efectos similares porque se generan dinámicamente.
Los degradados también se pueden cambiar de tamaño instantáneamente y se ven mejor cuando se acercan que las imágenes de mapa de bits porque el navegador los genera.
Hablaremos de las características que se aplican a todos los tipos de gradientes, comenzando con los gradientes lineales. A partir de ahí, pasaremos a gradientes radiales y cónicos.
Gradiente lineal
Sería mejor definir al menos dos paradas de color para crear un degradado lineal. Definimos algunos de los colores que necesitamos para hacer una transición suave.
Estos colores se denominan paradas de color. Puede especificar el punto de inicio y la dirección (o un ángulo) junto con el efecto de degradado.
Sintaxis - Gradiente lineal:
background-image: linear-gradient(direction, color1, color2, ...);
Se permite especificar cualquier número de colores. La dirección también es un argumento opcional; por defecto, la dirección es lineal de arriba a abajo.
La siguiente página HTML contiene un div con una altura de 100px y una imagen de fondo degradada.
<head>
<style>
#myBlock {
height: 100px;
background-image: linear-gradient(yellow, grey);
}
</style>
</head>
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Tenga en cuenta que no hemos especificado la dirección del degradado, por lo que se establece en la dirección de arriba hacia abajo porque es el valor de dirección.
Además, podemos especificar cualquier dirección con el nombre o también con el ángulo. El siguiente ejemplo establece el degradado de izquierda a derecha.
#myBlock {
height: 100px;
background-image: linear-gradient(to right,blue,pink);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Puede especificar la dirección en una posición diagonal. Para eso, se deben especificar las posiciones iniciales en las direcciones horizontal y vertical.
#myBlock {
height: 100px;
background-image: linear-gradient(to bottom right,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Puede especificar el ángulo de dirección para tener más control sobre la configuración de color.
#myBlock {
height: 100px;
background-image: linear-gradient(160deg,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Coloque sus colores
Sus paradas de color no tienen que permanecer en sus ubicaciones predeterminadas. Puede ajustar la posición de cada uno dándole un valor de cero, uno o dos porcentajes.
Los puntos inicial y final de una ubicación especificada como porcentaje son 0% y 100%, respectivamente. Sin embargo, si es necesario, se pueden usar valores fuera de esos rangos para lograr el resultado deseado.
Si no especifica una ubicación, la posición de esa parada de color específica se determinará automáticamente. La primera y la última parada de color estarán al 0 % y al 100 %, respectivamente, y cualquier parada de color adicional estará a mitad de camino entre sus paradas de color adyacentes.
Considere el siguiente ejemplo en el que usamos tres colores y especificamos sus posiciones de tres maneras: uno con px, uno con porcentaje, y el último se deja como está para que su posición se establezca en consecuencia.
#myBlock {
height: 100px;
background: linear-gradient(to right, yellow 28px, red 77%, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Gradientes radiales
A diferencia de los gradientes lineales, los gradientes radiales irradian hacia afuera desde un punto central. La ubicación de ese punto central depende de usted, y también se puede hacer que sea elíptico o circular.
Al igual que los degradados lineales, los degradados radiales solo requieren el uso de dos colores. De forma predeterminada, el centro del degradado está en la marca del 50 % y es elíptico para coincidir con la relación de aspecto del cuadro:
Sintaxis - Gradiente radial:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Por ejemplo, el siguiente código CSS crea un degradado radial con tres colores. Si no especificamos ninguna posición o forma, distribuye uniformemente todos los colores a partir del punto central.
#myBlock {
height: 100px;
background: radial-gradient(red, yellow, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Dimensionamiento de degradados radiales
Los degradados radiales le permiten especificar el tamaño, a diferencia de los degradados lineales. Los valores de esquina más cercana, lado más cercano, esquina más alejada y lado más lejano se encuentran entre las opciones, con esquina más alejada como valor predeterminado.
Tanto las elipses como los círculos tienen opciones de tamaño adicionales, que incluyen longitud y porcentaje. Los siguientes ejemplos muestran los diferentes tamaños con sus correspondientes salidas.
#myBlock {
height: 100px;
background-image: radial-gradient(closest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
#myBlock {
height: 100px;
background-image: radial-gradient(farthest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Gradientes cónicos
El degradado cónico es el tipo de degradado en el que los colores giran alrededor de un punto central definido (en lugar de irradiar desde el centro). Los gráficos circulares y las ruedas de color son dos ejemplos de degradados cónicos, pero también se pueden usar para hacer tableros de ajedrez y algunos efectos más intrigantes.
La sintaxis de gradiente cónico es equivalente a la sintaxis de gradiente radial. Sin embargo, las paradas de color deben definirse en la unidad de grado y porcentajes solamente, pero no en longitudes absolutas.
También deben colocarse alrededor del arco de degradado en lugar de en la línea de degradado que emerge del centro del degradado.
Sintaxis - Gradiente cónico:
background-image: conic-gradient([angle] [position,] color [degree], color [degree], ...);
La posición y el ángulo por defecto son 0 y centro, respectivamente.
Por ejemplo, los colores del degradado se distribuirán uniformemente alrededor del punto central si no se especifica ningún grado.
#myBlock {
height: 100px;
background-image: conic-gradient(red, yellow, cyan);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Posición de los gradientes cónicos
De forma similar a los degradados radiales, también se puede especificar la posición del punto central en degradados cónicos.
El siguiente ejemplo de código especifica la posición del punto central, así como el grado de todos los colores.
#myBlock {
height: 100px;
background-image: conic-gradient(at 10% 40%, cyan 10%, magenta 30%, yellow 50%);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Cambiar el grado de ángulo del degradado
La lista de colores que define normalmente se distribuye uniformemente alrededor del círculo. Para especificar el ángulo de inicio del gradiente cónico, utilice la palabra clave desde y especifique el ángulo después.
También podemos especificar diferentes ubicaciones para las paradas de color agregando un ángulo o una longitud después de ellas. El siguiente ejemplo define el ángulo para establecer el centro del gradiente cónico.
#myBlock {
height: 100px;
background-image: conic-gradient(from 48deg, red, orange 40%, yellow 65%, green);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
Conclusión
Disponemos de múltiples opciones que nos permiten configurar el fondo degradado. Como en todos los ejemplos, hemos establecido el fondo degradado de un elemento div.
En un patrón similar, este fondo se puede configurar con cualquier elemento HTML, siempre que admita la aplicación de la imagen de fondo.