Gradientes

Podcast de CSS - 021: Gradientes

Imagina que tienes un sitio para construir 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?

Un fondo degradado de color púrpura oscuro a claro con encabezado, párrafo y vínculo.

Inicialmente podrías pensar que vas a necesitar exportar una imagen de tu herramienta de diseño para esto, pero puedes usar linear-gradient en su lugar.

Un gradiente es una imagen y puede usarse en cualquier lugar pero se crea con CSS y está formado por colores, números y ángulos. Los gradientes de CSS te permiten crear lo que quieras, desde un gradiente suave entre dos colores, hasta impresionantes obras de arte mezclando y repitiendo varios gradientes.

Gradiente lineal

Navegadores compatibles

Origen

La linear-gradient() genera una imagen de dos o más colores, de forma progresiva. Toma varios argumentos, pero en su configuración más sencilla, puedes pasar algunos colores como este y automáticamente los dividirá de manera uniforme y los mezclará.

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

También puedes pasar un ángulo o palabras clave que representen un ángulo. Si eliges utilizar palabras clave, especifica una dirección después de la palabra clave to. Esto significa que si quieres un gradiente que sea blanco y negro, que va de izquierda (negro) a derecha (blanco), especificarías el ángulo como to right como primer argumento.

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

Un valor de límite 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 corre en un ángulo de 45 grados, el 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 tonos como quieras en un linear-gradient(), y puedes superponer gradientes uno sobre otro separando cada gradiente con una coma.

Gradiente radial

Navegadores compatibles

Origen

Para crear un gradiente que se irradia de forma circular, la radial-gradient() la función interviene como ayuda. Es similar a linear-gradient(), pero, en vez de especificar un ángulo, puedes especificar una posición y una forma final. Si solo especificas colores, radial-gradient() seleccionará automáticamente la posición como center. y selecciona 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 si 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 une exactamente con la esquina más lejana de la caja al centro. También puedes utilizar las siguientes palabras clave:

closest-corner alcanzará la esquina más cercana al centro del gradiente.
closest-side se unirá al lado del cuadro más cercano al centro del gradiente.
farthest-side hará lo contrario a closest-side.

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

Gradiente cónico

Navegadores compatibles

Origen

Un gradiente cónico tiene un punto central en tu 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 conic-gradient() acepta argumentos de posición y ángulo.

De forma predeterminada, el ángulo es de 0 grados, que comienza en la parte superior, en el centro. Si establecieras 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.

De forma predeterminada, la posición es central. Al igual que con los gradientes radiales y lineales, el posicionamiento puede estar basado en palabras clave, o se puede definir con valores numéricos.

Puedes agregar tantos límites de color como desees, como con otros tipos de gradientes. Un buen caso de uso para esta capacidad, con gradientes cónicos, es renderizar gráficos circulares con CSS.

Repetición y mezcla

Cada tipo de gradiente también tiene un tipo repetido. 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 rellenar el cuadro, en función de ambos tamaños.

Si parece que tu gradiente no se repite, probablemente 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 configurando 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, además de definir tantos gradientes como desees, tal como lo harías con una imagen de fondo. Por ejemplo, puedes mezclar 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 los gradientes
Generador de gradientes

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los gradientes

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

Vuelve a intentarlo.

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

Vuelve a intentarlo.

¿Los elementos pueden tener varios gradientes como fondo?

Verdadero

La propiedad background-image permite muchos gradientes. Solo sepáralos con una coma.

Falso

¡Oh, pero sí pueden!