Generador de degradados CSS

Qué es un generador de degradados CSS

Un generador de degradados CSS convierte dos colores en una declaración `background-image` que puedes pegar en tu hoja de estilos. Eliges los colores, la forma —lineal, radial o cónica— y la dirección, y él escribe la regla. No se exporta ninguna imagen: un degradado CSS lo dibuja el navegador al tamaño que tenga el elemento, así que se mantiene nítido y no cuesta ancho de banda.

Lo que casi todos los generadores se dejan es el espacio de interpolación. CSS Color 4 permite que un degradado indique por qué espacio de color debe viajar el navegador —`linear-gradient(90deg in oklch, ...)`— y esa elección cambia el centro del degradado mucho más de lo que jamás lo hará el ángulo. Está disponible en todos los navegadores principales desde mayo de 2023.

Este generador hace visible esa decisión en vez de tomarla por ti: tus dos colores aparecen a la vez en los tres espacios, cada uno con la medición de lo que cuesta.

Cómo usar el generador de degradados

1. Elige los dos colores. Usa el selector para escogerlos o escribe directamente un valor hexadecimal. La vista previa y el CSS se actualizan sobre la marcha, sin ningún botón.
2. Elige la forma y el espacio de interpolación. Lineal, radial o cónico, con un control de ángulo para los dos primeros. Después sRGB, Oklab u Oklch: el panel comparativo de abajo muestra los tres para tus colores en cualquier caso, así que ves entre qué estás eligiendo.
3. Copia la declaración. Obtienes una regla `background-image:` completa con el espacio de interpolación escrito de forma explícita, incluso en sRGB, donde es el valor por defecto: una regla que alguien va a pegar y leer más tarde debería decir lo que hace.

«Usa oklab para los degradados» es verdad a medias

El consejo habitual dice que los degradados en sRGB se enturbian por el centro y que Oklab lo arregla. La primera mitad es cierta. La segunda está al revés, y es fácil de medir.

Toma azul y amarillo. Interpolado en sRGB, el punto medio es #7F7F7F: no turbio, literalmente gris, con un croma medido de cero. Sobre 15.000 pares aleatorios saturados y de tono casi opuesto, sRGB pierde una mediana del 75,8% del color de los extremos en el punto medio, y el 13,73% de esos puntos medios sale prácticamente gris. Oklab no lo arregla: lo empeora, con una pérdida mediana del 83,3% y un 22,99% de puntos medios grises, casi el doble.

El motivo es estructural, no una rareza. sRGB y Oklab son espacios rectangulares, así que interpolar es trazar una recta entre dos puntos, y la recta entre dos tonos opuestos pasa por el eje neutro en mitad del camino. Oklch es polar: interpola un ángulo de tono, de modo que nunca tiene que cruzar el centro. Medido sobre esos mismos 15.000 pares, pierde un 14,6%, y los puntos medios grises ocurren el 0,00% de las veces.

Entonces, ¿para qué sirve Oklab en realidad? Para una rampa uniforme de luminosidad percibida, donde gana con claridad. Sobre 15.000 pares aleatorios, la peor desviación respecto de una rampa recta de luminosidad es de una mediana del 8,60% en sRGB frente al 0,70% en Oklab —más de diez veces mejor— y en el percentil 90 es del 44,68% frente al 2,53%. Eso es el bandeado que se ve en un degradado largo en sRGB, y Oklab es la respuesta correcta a ese problema.

Dos quejas, dos soluciones distintas, y el consejo que resuelve una empeora la otra. Oklch queda en medio en luminosidad (una mediana del 1,25%) conservando el color, y por eso esta página lo trae por defecto; pero el panel muestra los tres, porque la respuesta correcta depende de tus dos colores y no de una regla general.

Limitaciones honestas

La vista previa es CSS real. La interpolación la hace el navegador, así que lo que ves es lo que verán tus visitantes y esta página nunca tiene que afirmar que su propio dibujado coincide con el del navegador. La tira comparativa es la excepción: esas tres barras se dibujan con 21 paradas calculadas para poder comparar los espacios incluso en un navegador anterior a esta sintaxis, de modo que son una aproximación fiel de la versión suave, no la versión suave.

Este generador trabaja con dos paradas de color, no con una lista arbitraria. Es deliberado: la cuestión de la interpolación trata de lo que ocurre entre un par, y las mediciones de arriba solo están definidas para un par. Si necesitas un degradado de varias paradas, la sintaxis CSS admite más paradas exactamente en la misma forma, y la palabra clave del espacio funciona igual.

Las cifras de esta página proceden de pares de colores aleatorios, que es la manera justa de comparar tres espacios pero no es como nadie elige colores. Tu par concreto puede comportarse de forma muy distinta, y por eso el panel mide el tuyo en lugar de recitarte una media. Dos tonos parecidos apenas difieren entre espacios; dos tonos opuestos difieren muchísimo.

El croma y la luminosidad se miden aquí en Oklab, una elección que por construcción favorece el resultado de luminosidad de Oklab, ya que se le puntúa en su propia escala. También es la escala que usa hoy el propio CSS, y el resultado de croma va en contra de Oklab, no a su favor, así que ese sesgo no explica el hallazgo.

Las conversiones de color se comprueban contra una implementación independiente de la misma especificación sobre 20.000 colores, con coincidencia mejor que una parte por millón, junto a 26 comprobaciones que cubren los viajes de ida y vuelta, la regla del arco de tono más corto y las cifras publicadas arriba.

¿Por qué es gratis?

Aquí todo es aritmética y un atributo `style`, ejecutándose en tu navegador mientras escribes. No se sube ningún color, no hay cuenta y no hay límite de exportaciones: el resultado son tres líneas de CSS que podrías haber escrito tú.

Tampoco hay marca de agua, lo que en un degradado no es gran promesa, ni una versión de pago que retenga el panel comparativo: ese panel es la razón de ser de la página.