Generador de Degradados Aleatorios

Nueve degradados con un clic, con CSS y PNG que no se apagan en el centro

Cada vez que pulsas Nuevo degradado o la barra espaciadora, el generador de degradados aleatorios saca un degradado principal en el escenario grande y ocho candidatos a su lado. Si pulsas un candidato, intercambia su lugar con el escenario, así que comparar resulta más rápido que ir pasando resultados de uno en uno. Fija con el candado los colores que te gusten y elige la forma entre lineal, radial, cónico y malla, o déjala al azar.

Lo que más cuida este generador es cómo se mezclan los colores. Un degradado CSS escrito solo con colores HEX se mezcla tal cual en sRGB por compatibilidad con versiones anteriores. Por eso un degradado de azul (#0000FF) a amarillo (#FFFF00) pasa por el gris #808080 en el centro. Esta herramienta entrega por defecto una línea de CSS que mezcla en OKLCH y, delante de ella, una línea en sRGB para los navegadores antiguos que no la entienden. Copia el resultado como CSS o guárdalo como PNG con el tamaño de un escritorio o de un móvil.

Cuándo usarlo

• Elegir el fondo de una portada o de un banner: en Pruébalo, el degradado se aplica directamente a una portada de ejemplo, y los valores de contraste indican si se leerá mejor el texto blanco o el negro.
• Necesitar un fondo de escritorio o una imagen de fondo para una presentación: guarda el degradado que te guste como PNG de 1920×1080, 4K, vertical 1080×1920 y otros tamaños. También puedes escribir el tamaño en los campos de ancho y alto.
• Buscar un degradado que combine con un color de marca: carga desde un enlace un degradado que contenga ese color, fíjalo con el candado y elige una armonía. Los demás colores se calculan a partir del matiz del color fijado.
• Elegir colores para botones y para resaltar texto: se muestran juntos un texto con degradado, un botón relleno y una tarjeta con borde, así que puedes ver la impresión que dan en elementos pequeños y no solo en un fondo amplio.

Cómo se usa

1. Generar: pulsa el botón Nuevo degradado o la barra espaciadora. La barra solo funciona cuando el escenario está a la vista y ningún campo ni botón tiene el foco.
2. Elegir: al pulsar uno de los 8 candidatos, sube al escenario, y el degradado que estaba en el escenario baja a su lugar.
3. Fijar: el color cuyo candado pulses se queda en la misma posición en el siguiente sorteo. Con Fijar forma y ángulo activado, la forma, el ángulo, el centro y la posición de los puntos de la malla no cambian y solo varían los colores.
4. Cambiar los ajustes: al cambiar la forma, la armonía, el número de colores o el tono, se genera de nuevo al instante con ese ajuste. El espacio de mezcla y la barra del ángulo no vuelven a sortear los colores, solo cambian el degradado actual.
5. Llevártelo: Copiar CSS copia una declaración background de dos líneas, y Copiar enlace copia una dirección con el degradado actual. Guardar PNG crea la imagen con el tamaño elegido y la descarga. Los 20 más recientes quedan solo en este navegador.

Cómo se eligen los colores y las formas

Los colores se eligen en OKLCH. OKLCH es Oklab, que Björn Ottosson diseñó para ajustarse a la luminosidad y a la diferencia de color que percibimos, reescrito como luminosidad (L), saturación (C) y ángulo de matiz (H). Primero la regla de armonía fija un ángulo de matiz para cada color del degradado y después se eligen la luminosidad y la saturación dentro del rango del tono. La luminosidad fluye en una sola dirección desde el primer color hasta el último (con una variación de ±0,03) y la dirección es aleatoria, de modo que el degradado tiene un lado más claro y otro más oscuro. Si el color elegido queda fuera de lo que sRGB puede mostrar, se mantienen la luminosidad y el matiz y solo se reduce la saturación.

La forma también se elige al azar. El degradado lineal toma el ángulo en pasos de 15°. El radial toma el centro entre 0, 25, 50, 75 y 100 % en cada eje, y el cónico entre 25, 50 y 75 %, con el ángulo inicial en pasos de 15°. La malla coloca el primer color como base y pone un punto por cada color restante. La posición de los puntos va en pasos del 5 % y el radio de difusión es del 50 al 80 % del tamaño de la caja. Si un color fijado es cromático, su ángulo de matiz pasa a ser la base de la regla.

Por qué el centro se vuelve gris y cómo se mezcla

CSS Color 4 establece que, si no se indica un espacio, los degradados se mezclan en Oklab, pero por compatibilidad con versiones anteriores hace que los colores escritos solo con notaciones sRGB antiguas, como HEX, rgb() y hsl(), se mezclen en sRGB con codificación gamma. La mayoría del código de degradados está escrito en HEX, así que en la práctica muchos degradados se mezclan en sRGB. Cuando se mezclan colores complementarios en sRGB, los valores de rojo, verde y azul se parecen en el centro y el resultado es gris.

Los tres espacios se comportan de forma distinta. OKLab une la luminosidad de manera uniforme. La luminosidad central de 0,709 entre el azul (L 0,452) y el amarillo (L 0,968) es casi el promedio de ambos, y el centro no se oscurece como con el 0,600 de sRGB. Aun así, pasa en línea recta por el lado opuesto de la rueda de color, de modo que la saturación sigue bajando mucho. OKLCH gira el ángulo de matiz por el camino corto y conserva la saturación, por lo que el centro sigue vivo. A cambio, aparece en el centro un color que no estaba en los extremos, como el cian por el que se pasa al ir del azul al amarillo.

Para cada regla se sortearon 10.000 degradados de dos colores (tono Básico, semilla fija) y se contó con qué frecuencia el punto más apagado del degradado cae por debajo de la mitad de la saturación de los colores de los extremos. Los complementarios y el complementario dividido, cuyos ángulos de matiz se separan 150° o más, se apagan en el centro la mayoría de las veces tanto en sRGB como en OKLab, y solo OKLCH lo evita. Por eso esta herramienta usa OKLCH por defecto, y por eso las bandas y la curva de saturación que hay bajo Pruébalo comparan los tres espacios con los mismos colores.

Sintaxis CSS y compatibilidad de navegadores

El CSS que se copia tiene la forma siguiente para cada tipo. No se escriben las posiciones de los colores, así que se usa el reparto uniforme por defecto de CSS.

• Lineal: linear-gradient(135deg in oklch, #FFC9A3, #F7849F, #A08AF0). En la especificación CSS Images, 0deg apunta hacia arriba y 90deg hacia la derecha, y los ángulos mayores giran en sentido horario. La longitud de la línea del degradado es abs(W·sinA) + abs(H·cosA) para una caja de ancho W y alto H.
• Radial: radial-gradient(circle at 25% 75% in oklch, …). Si no se indica el tamaño, el final está en la esquina más lejana del centro (farthest-corner).
• Cónico: conic-gradient(from 45deg at 50% 50% in oklch, A, B, C, A). El ángulo inicial 0deg es hacia arriba y gira en sentido horario. El primer color se repite una vez al final para que no aparezca una costura donde se cierra el círculo.
• Malla: el primer color es la base y, por cada color restante, se superpone una elipse como radial-gradient(60% 60% at 20% 30%, #color, #color00), que termina en el mismo color con opacidad 0. El color no cambia y solo varía la opacidad, así que el espacio de mezcla no influye y no se escribe in.
• Paradas blancas, negras y grises: en la línea OKLCH se escriben como oklch(1 0.002 264.05), con una saturación invisible de 0,002 y el tono del color vecino, y dos veces en la misma posición cuando los colores de cada lado tienen tonos distintos. La especificación hace que un color acromático tome el tono de su vecino, pero con saturación 0 Chrome trató el tono de otra forma y cambió los colores del centro (comprobado el 2026-10-20).

Un navegador que no conoce los espacios de mezcla descarta toda la declaración que contiene in oklch. Por eso el CSS copiado pone primero la línea que mezcla en sRGB y después la línea OKLCH u OKLab. Los navegadores nuevos usan la línea posterior y los antiguos la anterior. Si inviertes el orden, la línea sRGB gana incluso en los navegadores nuevos.

Texto sobre un degradado

El criterio de éxito 1.4.3 de WCAG 2.2 exige un contraste de al menos 4,5:1 entre el texto normal y su fondo, y de al menos 3:1 para el texto grande (18 pt, o 14 pt en negrita o más). El documento Understanding no tiene una regla aparte solo para degradados, y la técnica G18 pide mirar el contraste entre el texto y el fondo que tiene detrás. El color de fondo cambia de un lugar a otro en un degradado, así que esta herramienta compara los colores de parada y todos los colores de la línea del degradado, dividida en 1024 pasos (en la malla, una cuadrícula de 128 columnas y el centro de cada punto), y muestra el contraste más bajo para el texto blanco y para el texto negro. En los degradados lineales, radiales y cónicos el centro queda dentro del recuadro, así que cada posición de la línea aparece en algún lugar de la pantalla; por eso este valor es el contraste más bajo de toda la pantalla, sea cual sea la proporción. El contraste se trunca a un decimal y se juzga con ese valor, de modo que 4,48:1 nunca se redondea a 4,5:1 para aprobar.

Son recuentos sobre 5000 degradados de tres colores por tono (mezclados en OKLCH, semilla fija). El tono Básico tiene un rango amplio de luminosidad, de 0,50–0,90, así que el texto blanco no llega a 4,5:1 en el extremo claro y el texto negro no llega en el extremo oscuro. Si el fondo va a llevar texto, es más rápido sacarlo de Pastel (texto negro) o de Oscuro (texto blanco). El degradado de la portada de ejemplo, melocotón → rosa → lavanda, da 1,4:1 con texto blanco y 7,3:1 con texto negro.

Guardar como PNG

También puedes escribir tú el ancho y el alto, como números enteros entre 16 y 4096 px. El PNG no se envía a ningún servidor. El navegador calcula cada píxel directamente. Calcula la longitud de la línea del degradado lineal, el farthest-corner del radial, el ángulo del cónico y la superposición de la malla con las mismas fórmulas que CSS, y usa el espacio de mezcla que hayas elegido. Un degradado suave sobre una superficie amplia en color de 8 bits tiende a mostrar bandas en escalera, por eso se suma a cada canal un pequeño valor aleatorio de ±0,5 pasos antes de redondear (dithering).

Si la imagen tiene una proporción distinta de la del escenario, el mismo CSS se ve algo diferente. Por ejemplo, un degradado lineal de 90° (izquierda → derecha) tiene una línea tan larga como el ancho de la caja, así que en una imagen de 1920 px de ancho los colores cambian más despacio que en una de 1080 px de ancho.

Errores frecuentes

• Leer el ángulo como un ángulo matemático: en CSS, 0deg es hacia arriba. Si piensas en 0° como hacia la derecha, como en matemáticas, la dirección se desvía 90°.
• Pegar solo la línea OKLCH: en un navegador que no conoce los espacios de mezcla, desaparece todo el fondo. Deja delante la línea sRGB.
• Invertir el orden de la línea sRGB y la línea OKLCH: gana la declaración posterior, así que si la línea sRGB va detrás, el centro se ve apagado incluso en los navegadores nuevos.
• La costura del degradado cónico: si el último color es distinto del primero, aparece un borde marcado en la posición 0deg, arriba. Si escribes de nuevo el primer color al final, se cierra.
• Medir el contraste del texto en un solo punto: puede cumplir en el extremo claro del degradado y no cumplir en el oscuro. Mira el valor más bajo en toda la zona donde pueda ir el texto.

Límites y precauciones

• Como es aleatorio, con los mismos ajustes el resultado es distinto cada vez. Un resultado anterior solo se recupera con un enlace o con los 20 recientes, y el historial se guarda solo en este navegador (los 10 registros de la versión anterior se trasladan una sola vez).
• Si un color mezclado queda fuera del rango sRGB, se recorta canal por canal. Si un navegador lo ajusta de otra forma, los colores en pantalla y en el PNG pueden diferir un poco.
• La posición de los colores siempre es uniforme. Para afinar las posiciones o los colores uno a uno, es más adecuado un generador de degradados CSS.
• El contraste del texto solo considera el valor más bajo en todo el degradado, para texto blanco y negro. No se tienen en cuenta la posición real del texto, su grosor, las sombras ni las diferencias en la visión del color.
• El PNG puede tener hasta 4096 px por lado. En un móvil, dibujar una imagen grande puede tardar unos segundos.

Fecha de referencia Las especificaciones CSS, la compatibilidad de navegadores y las fuentes de WCAG se comprobaron el 2026-10-20. Las proporciones de las tablas son recuentos hechos con las reglas de generación de esta herramienta.

Fuentes

• 01W3C: CSS Images Module Level 3Sección 3.1.1: 0deg apunta hacia arriba y 90deg hacia la derecha, longitud de la línea del degradado abs(W·sinA) + abs(H·cosA). Sección 3.2: el tamaño radial por defecto es farthest-corner
• 02W3C: CSS Images Module Level 4Sintaxis del espacio de mezcla en degradados lineales, radiales y cónicos; el ángulo inicial 0deg del cónico es hacia arriba y en sentido horario; Oklab si no se indica
• 03W3C: CSS Color Module Level 4Sección 13, interpolación: con notación sRGB antigua se mezcla en sRGB con codificación gamma, el alfa es premultiplicado, el matiz polar usa shorter por defecto
• 04Björn Ottosson: A perceptual color space for image processingDefinición de Oklab y matrices de conversión a sRGB (2020-12-23)
• 05MDN: linear-gradient()Tabla de compatibilidad: espacio de mezcla en Chrome y Edge 111, Firefox 127, Safari 16.2
• 06MDN: conic-gradient()Tabla de compatibilidad: Chrome 69, Edge 79, Firefox 83, Safari 12.1
• 07W3C: WCAG 2.21.4.3 contraste de 4,5:1 (3:1 para texto grande), texto grande como 18 pt o 14 pt en negrita, fórmula de la relación de contraste
• 08W3C: Understanding SC 1.4.3 Contrast (Minimum)Cita como fallo las imágenes de fondo que no contrastan lo suficiente con el texto; G18 trata el contraste entre el texto y el fondo que tiene detrás

Preguntas frecuentes

Herramientas para usar con esta