Generador de Gradientes CSS

Los degradados son imágenes, no colores

Un degradado de CSS se genera mediante las funciones linear-gradient, radial-gradient o conic-gradient, y cada una produce un valor de imagen, no un color. Ese único hecho explica gran parte de cómo se comportan los degradados. Como el resultado es una imagen, lo asignas a una propiedad que acepta imágenes, casi siempre background o background-image, y se repite, se escala y se apila como cualquier otro fondo. Tampoco tiene un tamaño intrínseco: rellena la caja en la que lo coloques, y por eso el mismo degradado puede verse pronunciado en un botón y suave a lo largo de una sección hero.

Degradados lineales y dirección

Un degradado lineal mezcla colores a lo largo de un eje recto. Defines ese eje con un ángulo o con una palabra clave de dirección. Los ángulos se miden en el sentido de las agujas del reloj a partir de la vertical hacia arriba, así que 0deg va de abajo hacia arriba, 90deg va de izquierda a derecha y 180deg va de arriba hacia abajo. Las formas con palabras clave, como to right o to bottom right, suelen ser más claras en los casos sencillos y tienen la ventaja de apuntar exactamente a una esquina, algo que un ángulo fijo no puede hacer a medida que la caja cambia de forma.

El control deslizante de ángulo de esta herramienta escribe por ti el valor en grados. Un consejo sutil: un degradado que corre en una ligera diagonal, en torno a 135deg, casi siempre se ve más refinado que una mezcla plana vertical u horizontal, porque el ojo interpreta la diagonal como luz que roza una superficie.

Degradados radiales y cónicos

Un degradado radial mezcla los colores hacia afuera desde un punto central en anillos concéntricos, lo que resulta ideal para focos de luz, viñetas suaves y resplandores. De forma predeterminada crea una elipse que rellena la caja, pero puedes convertirlo en un círculo perfecto y mover su centro, de modo que un punto de luz pueda situarse en una esquina en lugar de justo en el medio. Los degradados radiales son la opción natural siempre que la luz o el foco deba parecer que proviene de un único punto.

Un degradado cónico recorre los colores alrededor de un centro como las agujas de un reloj, en lugar de hacia afuera desde él. Ese barrido rotatorio es lo que convierte a los degradados cónicos en la base de los gráficos circulares, las ruedas de color y el cada vez más común resplandor cónico que se usa como acento en una tarjeta. Los mismos puntos de color que ya conoces siguen aplicándose; solo cambia la geometría de cómo se distribuyen entre los degradados lineales, radiales y cónicos.

Puntos de color y posiciones

Cada degradado se define mediante puntos de color, donde cada punto es un color y una posición opcional a lo largo de la línea del degradado, que normalmente se escribe como un porcentaje de 0 a 100. Con dos puntos obtienes una mezcla sencilla; añadir más te permite hacer pasar el degradado por varios colores. Si omites las posiciones, el navegador distribuye los puntos de manera uniforme, pero fijarlas a mano es la forma de controlar con exactitud dónde se sitúa cada color y cuánto espacio recibe cada transición.

Las posiciones no tienen por qué aumentar de forma uniforme, y ahí es donde los degradados se vuelven interesantes. Agrupar dos puntos muy juntos produce una transición rápida, mientras que separarlos produce una lenta y suave. Incluso puedes dar a dos puntos la misma posición para eliminar por completo la mezcla, que es la clave de la siguiente técnica.

Puntos abruptos: rayas, bandas y formas

Cuando dos puntos de color adyacentes comparten la misma posición, la transición entre ellos ocurre en una distancia nula, lo que produce un borde nítido en lugar de una mezcla. Repite ese patrón y obtendrás rayas, tableros de ajedrez, barras de progreso y bandas codificadas por color, todo ello dibujado en CSS sin ninguna imagen. Por ejemplo, un degradado que mantiene un color del 0 al 50 por ciento y un segundo color del 50 al 100 por ciento te da una división limpia en dos tonos justo por la mitad.

Combina los puntos abruptos con repeating-linear-gradient o repeating-radial-gradient y el patrón se repite automáticamente por toda la caja, de modo que puedes crear rayas de caramelo, cinta diagonal de peligro o líneas guía finas a partir de una sola declaración breve. Como es matemática vectorial y no un mapa de bits, se mantiene perfectamente nítido en cualquier tamaño y con cualquier densidad de píxeles.

Transparencia y superposición

Los puntos de un degradado pueden usar colores con un canal alfa, y desvanecerse hacia un color totalmente transparente es uno de los recursos más útiles que puedes emplear. Un degradado que va de un color sólido a transparente crea el velo que ves detrás del texto en la parte inferior de una foto, el desvanecimiento en el borde de una lista que se desplaza y las máscaras suaves de imagen. Una advertencia: en algunas interpolaciones de color, desvanecerse hacia el transparente puro puede pasar por un punto medio gris apagado, así que desvanecerse hacia el mismo color con canal alfa a cero, en lugar de hacia una simple palabra clave transparent, da un resultado más limpio.

Como los degradados son imágenes, la propiedad background acepta varios separados por comas, pintados de adelante hacia atrás. Apilar un sutil degradado transparente sobre un degradado base es la forma en que se construyen los fondos modernos y ricos sin un solo archivo de imagen.

Accesibilidad: texto sobre degradados

El riesgo con los degradados está debajo de tu texto. El contraste puede ser perfectamente correcto en un extremo de un degradado y fallar gravemente en el otro, de modo que un titular legible sobre la parte oscura puede desaparecer sobre la parte clara. Comprueba siempre la región del peor caso, no la media. La solución robusta es colocar un velo sólido semitransparente, o un degradado específico de oscuro a transparente, entre el fondo recargado y el texto, para que la relación de contraste se mantenga segura en todas partes. Trata el punto más claro bajo el texto claro, y el más oscuro bajo el texto oscuro, como el valor que realmente tienes que superar.