El podcast de CSS 021: Gradientes
Imagina que tienes un sitio para crear y, en la parte superior, hay una introducción con un encabezado, un resumen y un botón. El diseñador entregó un diseño con fondo púrpura para esta introducción. El único problema es que el fondo presenta dos tonos de púrpura como gradiente. ¿Cómo lo haces?
Al principio, podrías pensar que deberás exportar una imagen desde tu herramienta de diseño para hacerlo, pero, en su lugar, puedes usar un linear-gradient.
Un gradiente es una imagen y se puede usar en cualquier lugar donde se puedan usar imágenes, pero se crea con CSS y contiene colores, números y ángulos. Los gradientes de CSS te permiten crear lo que quieras, desde un gradiente suave entre dos colores hasta material gráfico impresionante mezclando y repitiendo varios gradientes.
Gradiente lineal
La función linear-gradient() genera una imagen de dos o más colores, de forma progresiva.
Toma varios argumentos, pero en su configuración más simple, puedes pasar algunos colores como este y los dividirá automáticamente de manera uniforme y los combinará.
.my-element {
background: linear-gradient(black, white);
}
También puedes pasar un ángulo o palabras clave que representen uno.
Si eliges usar palabras clave, especifica una dirección después de la palabra clave to.
Esto significa que, si deseas un gradiente de blanco y negro, que se extienda de izquierda (negro) a derecha (blanco), debes especificar el ángulo como to right como primer argumento.
.my-element {
background: linear-gradient(to right, black, white);
}
Es un valor de finalización de color definido donde se detiene un color y se mezcla con sus vecinos. Para un gradiente que comienza con un tono de rojo oscuro que se ejecuta en un ángulo de 45 grados, al 30% del tamaño del gradiente cambia a un rojo más claro: se ve así.
.my-element {
background: linear-gradient(45deg, darkred 30%, crimson);
}
Puedes agregar tantos colores y elementos de color como quieras en una linear-gradient() y puedes superponer gradientes una encima de la otra separando cada uno de ellos con una coma.
Gradiente radial
Para crear un gradiente que se irradia de forma circular, la función radial-gradient() interviene para ayudarte.
Es similar a linear-gradient(), pero, en lugar de especificar un ángulo, puedes optar por una posición y una forma final.
Si solo especificas colores, radial-gradient() seleccionará automáticamente la posición como center y seleccionará un círculo o una elipse, según el tamaño del cuadro.
.my-element {
background: radial-gradient(white, black);
}
La posición del gradiente es similar a background-position cuando se usan palabras clave o valores numéricos.
El tamaño del gradiente radial determina el tamaño de la forma final del gradiente (círculo o elipse) y, de forma predeterminada, será farthest-corner, lo que significa que se cumple exactamente con la esquina más lejana del cuadro respecto del centro.
También puedes utilizar las siguientes palabras clave:
closest-cornerse encontrará con la esquina más cercana al centro del gradiente.closest-sidese encontrará con el lado del cuadro más cercano al centro del gradiente.farthest-sidehará lo contrario aclosest-side.
Puedes agregar tantas marcas de color como desees, como con linear-gradient.
Del mismo modo, puedes agregar todos los radial-gradients que desees.
Gradiente cónico
Un gradiente cónico tiene un punto central en el cuadro que comienza desde la parte superior (de forma predeterminada) y gira en un círculo de 360 grados.
.my-element {
background: conic-gradient(white, black);
}
La función conic-gradient() acepta argumentos de posición y ángulo.
De forma predeterminada, el ángulo es de 0 grados, que comienza en la parte superior y en el centro.
Si quisieras establecer el ángulo en 45deg, sería la esquina superior derecha.
El argumento de ángulo acepta cualquier tipo de valor de ángulo, como los gradientes lineal y radial.
De forma predeterminada, la posición es central. Al igual que con los gradientes radiales y lineales, el posicionamiento puede basarse en palabras clave o se puede definir con valores numéricos.
Puedes agregar tantas opciones de color como desees, como con otros tipos de gradientes. Un buen caso de uso para esta función, con gradientes cónicos, es la representación de gráficos circulares con CSS.
Repetir y mezclar
Cada tipo de gradiente también tiene un tipo repetido.
Estos son repeating-linear-gradient(), repeating-radial-gradient() y repeating-conic-gradient().
Son similares a las funciones no repetitivas y toman los mismos argumentos.
La diferencia es que si el gradiente definido se puede repetir para llenar el cuadro, según ambos tamaños, lo hará.
Si tu gradiente no se repite, es probable que no hayas establecido una longitud para uno de los elementos stop de color.
Por ejemplo, puedes crear un fondo a rayas con un repeating-linear-gradient mediante la configuración de longitudes de parada de color.
.my-element {
background: repeating-linear-gradient(
45deg,
red,
red 30px,
white 30px,
white 60px
);
}
También puedes mezclar funciones de gradiente en las propiedades de background y definir tantos gradientes como desees, tal como lo harías con una imagen de fondo.
Por ejemplo, puedes mezclar múltiples gradientes lineales o dos gradientes lineales con un gradiente radial.
Recursos
- Conic.css: una colección útil de gradientes cónicos.
- Guía de MDN sobre los gradientes
- Generador de gradientes
Verifica tus conocimientos
Poner a prueba tus conocimientos sobre gradientes
¿Cuál es la cantidad mínima de colores necesaria para crear un gradiente?
¿Los elementos pueden tener varios gradientes como fondo?
background-image permite muchos gradientes, solo sepáralos con una coma.