Generador de degradados CSS

Cómo copiar el CSS

1. 1

   Elige los colores y las posiciones

   Empieza con dos paradas y añade hasta ocho. Cada parada lleva un valor de color escrito y una posición en porcentaje, para que ajustes números exactos en vez de mover un control con el ratón.

2. 2

   Elige lineal, radial o cónico

   Define el ángulo para un degradado lineal o cónico, la forma y el centro para uno radial y si todo el degradado se repite o no. La vista previa se actualiza al instante.

3. 3

   Copia el CSS o descarga un PNG

   El CSS se genera como dos declaraciones: una versión de compatibilidad en sRGB y encima la versión moderna interpolada. También puedes exportar el mismo degradado como PNG a cualquier tamaño de hasta 4096 píxeles o como SVG.

Por qué interpolar en OKLCH

Un degradado de azul a amarillo en sRGB básico pasa por un gris apagado en el centro. No es un fallo del navegador: al promediar los canales rojo, verde y azul por separado, la crominancia se anula justo donde el ojo espera un verde limpio. OKLCH es un espacio perceptual, así que los mismos dos extremos producen un punto medio que sigue saturado y una rampa cuya luminosidad sube de forma uniforme. El CSS moderno te deja indicar en qué espacio quieres interpolar, como en «linear-gradient(90deg in oklch, ...)», y este generador usa ese espacio por defecto, con oklab, sRGB y HSL disponibles cuando quieres el aspecto antiguo.

Por qué la línea de compatibilidad importa más de lo que parece

Un navegador que no entiende «in oklch» no ignora solo esa palabra, descarta toda la declaración. Sin una versión de compatibilidad, el resultado no es un degradado algo distinto, sino que no hay degradado y se ve el color de fondo que haya debajo. Por eso el CSS copiado siempre contiene dos líneas de «background-image». La primera es la de compatibilidad: dieciséis paradas intermedias calculadas aquí en el espacio que elijas y escritas como hex sRGB simples, que se acercan lo bastante a la misma curva como para que la mayoría de la gente no note diferencia. La segunda es la versión moderna en una sola línea, que cualquier navegador compatible aplica por encima.

Degradados repetidos y el caso especial de los cónicos

Un degradado repetido va aplicando en mosaico la secuencia de paradas una y otra vez, lo que solo funciona si la última parada está por debajo del 100 %. Si no, no queda nada que repetir y el resultado es idéntico a la versión normal. Ese caso se detecta antes de que copies nada. Los degradados cónicos tienen su propia limitación al exportar: SVG 1.1 no tiene ningún elemento de degradado cónico, así que el botón de SVG te lo indica y te dirige al PNG, que se dibuja como 720 cuñas de medio grado para que los Safari antiguos también lo muestren bien.

Preguntas frecuentes