Gradientes

The CSS Podcast - 021: Gradients

Imagina que tienes un sitio para compilar 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 que tiene un fondo púrpura para esta introducción. El único problema es que el fondo tiene dos tonos de morado como gradiente. ¿Cómo lo haces?

En un principio, es posible que pienses que deberás exportar una imagen de tu herramienta de diseño para esto, pero puedes usar un linear-gradient en su lugar.

Un gradiente es una imagen y se puede usar en cualquier lugar donde se puedan usar imágenes, pero se crea con CSS y se compone de colores, números y ángulos. Los gradientes de CSS te permiten crear cualquier cosa, desde un gradiente suave entre dos colores hasta un material gráfico impresionante, combinando 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 se dividirán automáticamente de forma uniforme mientras se mezclan.

.my-element {
    background: linear-gradient(black, white);
}

También puedes pasar un ángulo o palabras clave que representen un ángulo. Si decides usar palabras clave, especifica una dirección después de la palabra clave to. Esto significa que, si deseas un gradiente en blanco y negro que vaya de la izquierda (negro) a la 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 parada de color definido donde un color se detiene y se mezcla con sus vecinos. Para un gradiente que comienza con un tono oscuro de rojo que se extiende en un ángulo de 45 grados, en el 30% del tamaño del gradiente que cambia a un rojo más claro, se ve de la siguiente manera.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Puedes agregar tantos colores y puntos de color como desees en un linear-gradient(), y puedes superponer gradientes entre sí separándolos con una coma.

Gradiente radial

Para crear un gradiente que irradie de forma circular, la función radial-gradient() te ayuda. Es similar a linear-gradient(), pero, en lugar de especificar un ángulo, puedes especificar de manera opcional una posición y una forma final. Si solo especificas colores, radial-gradient() seleccionará automáticamente la posición como center y elegirá 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 con 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 encuentra exactamente en la esquina más alejada del cuadro desde el centro. También puedes usar las siguientes palabras clave:

• closest-corner se encontrará con la esquina más cercana al centro del gradiente.
• closest-side se encontrará con el lado del cuadro más cercano al centro del gradiente.
• farthest-side hará lo opuesto a closest-side.

Puedes agregar tantos puntos de color como desees, al igual que con linear-gradient. Del mismo modo, puedes agregar tantos radial-gradients como desees.

Gradiente cónico

Un gradiente cónico tiene un punto central en el cuadro y 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 y comienza en la parte superior, en el centro. Si configuraras el ángulo en 45deg, sería la esquina superior derecha. El argumento de ángulo acepta cualquier tipo de valor de ángulo, como los gradientes lineales y radiales.

La posición es central de forma predeterminada. Al igual que con los gradientes radiales y lineales, el posicionamiento puede basarse en palabras clave o definirse con valores numéricos.

Puedes agregar tantos puntos de parada de color como desees, como con otros tipos de gradientes. Un buen caso de uso para esta función, con gradientes cónicos, es renderizar gráficos circulares con CSS.

Repetición y combinación

Cada tipo de gradiente también tiene un tipo de repetición. Estos son repeating-linear-gradient(), repeating-radial-gradient() y repeating-conic-gradient(). Son similares a las funciones no repetidas 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 parece que el gradiente no se repite, es probable que no hayas establecido una longitud para uno de los puntos de color. Por ejemplo, puedes crear un fondo a rayas con un repeating-linear-gradient si configuras las longitudes de las paradas de color.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

También puedes combinar funciones de gradiente en propiedades background, así como definir tantos gradientes como desees, al igual que lo harías con una imagen de fondo. Por ejemplo, puedes combinar varios 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 gradientes
• Generador de gradientes

Verifica tu comprensión

Pon a prueba tus conocimientos sobre los gradientes

¿Cuál es la cantidad mínima de colores necesarios para crear un gradiente?

1

Vuelve a intentarlo.

2

Pueden ser del mismo color y parecer sólidos, pero sí, se requieren al menos 2 colores.

3

Vuelve a intentarlo.

4

Vuelve a intentarlo.

¿Los elementos pueden tener varios gradientes como fondo?

Verdadero

La propiedad background-image permite muchos gradientes, solo debes separarlos con una coma.

Falso

Pero sí pueden.