Generador de degradados CSS

Aquí montas un degradado viendo en la vista previa cómo quedan los colores y la dirección, y te llevas copiada la declaración background ya terminada. De entrada está cargado el preajuste «Atardecer», cuyo CSS es background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);.

Cómo se usa

1. Preajustes: pulsa uno de los cinco (Atardecer, Océano, Caramelo, Monocromo y Aurora) para tener un punto de partida.
2. Tipo: elige entre «Lineal», «Radial» y «Cónico». Las opciones de debajo cambian según el tipo.
3. Puntos de color: fija los colores y sus posiciones. El manejo se explica con detalle en el apartado siguiente.
4. Interpolar en OKLCH (in oklch): al activarlo, la transición entre colores se hace en el espacio de color OKLCH.
5. CSS: muestra la declaración que resulta de la configuración actual; «Copiar CSS» la copia.

El ángulo se escribe en la casilla numérica o se elige entre 0 y 360 con el control deslizante. En la casilla puedes poner también valores mayores que 360 o negativos, y pasan al CSS tal como los escribes. La posición central se elige entre nueve lugares: el centro, los cuatro lados y las cuatro esquinas.

Manejo de los puntos de color

Un punto de color (color stop) es una marca que dice «en esta posición, este color»; el degradado se forma uniendo un punto con el siguiente. Puede haber entre 2 y 8.

• Al hacer clic en un hueco de la barra del degradado se crea un punto en ese lugar. Su color es el que se veía ahí, así que nada más añadirlo el aspecto del degradado no cambia. A partir de ahí puedes arrastrarlo o cambiarle el color.
• El botón «Añadir punto» coloca un punto blanco (#ffffff) a medio camino entre el último punto y el 100 %. Si el último punto ya está en el 100 %, el nuevo se coloca en el centro del hueco más ancho entre puntos para no quedar encima de él. Con un punto en el 0 % y otro en el 100 %, aparece en el 50 %.
• Arrastra un tirador o escribe un número en la casilla de posición de la lista para mover un punto. Con el teclado, sobre un tirador, las flechas lo desplazan un 1 %, y un 10 % si mantienes pulsada Mayús; Supr lo elimina.
• Los botones de subir y bajar de la lista intercambian la posición de un punto con la de su vecino. Sirven para invertir el orden de los colores.
• Quitar solo está disponible cuando hay 3 puntos o más.

La lista se muestra siempre ordenada por posición, y en ese mismo orden pasan los puntos al CSS. Las posiciones se escriben con un decimal como máximo.

Formatos de color admitidos: Como color de un punto se leen HEX (de 3, 4, 6 u 8 dígitos), nombres de color, rgb(), hsl(), oklch() y transparent. Las funciones hwb(), lab(), lch() y color() y las variables escritas con var() no se leen. Cuando un color no se puede leer aparece «Esto no es un color CSS que esta herramienta pueda leer.» y ese punto desaparece de la vista previa y del CSS. Los colores que sí se leen pasan al CSS con la misma notación en que los has escrito.

Al interpolar en OKLCH cambian los colores intermedios

Si no se indica otra cosa, un degradado CSS cuyos colores están todos escritos en HEX, con nombre, rgb() o hsl() mezcla los dos colores en el espacio sRGB, llevando en línea recta cada uno de los valores de rojo, verde y azul. El brillo que percibimos no es proporcional a esos números, y por eso, al mezclar dos colores alejados en el círculo cromático, el centro queda oscuro y apagado. OKLCH trata por separado la luminosidad (L), el croma (C) y el tono (H) y hace avanzar cada uno por su cuenta, de modo que ni el brillo ni la viveza se hunden a mitad de camino.

Con dos puntos en el 0 % y el 100 %, el color que se obtiene en el 50 % de la barra es este:

Cuanto más alejados están los tonos, mayor es la diferencia; entre colores parecidos, como los del preajuste Atardecer, apenas se nota. Conviene saber además que, al mezclar en OKLCH, en el centro aparecen tonos que no estaban en ninguno de los dos colores: entre el rojo y el verde, por ejemplo, pasan el naranja y el amarillo. Si lo que quieres es que los dos colores se mezclen directamente, lo indicado es dejar la opción desactivada.

Por qué el CSS copiado tiene dos líneas

La sintaxis que fija el método de interpolación, como in oklch, llegó a CSS relativamente tarde y hay navegadores que no la entienden. Por eso, al activar la interpolación en OKLCH la declaración sale en dos líneas. Para un degradado lineal del rojo al verde son estas:

background: linear-gradient(90deg, #ff0000 0%, #ff3300 12.5%, #ff5600 25%, #ff7600 37.5%, #f99500 50%, #e3b200 62.5%, #c2ce00 75%, #8fe800 87.5%, #00ff00 100%);
background: linear-gradient(90deg in oklch, #ff0000 0%, #00ff00 100%);

• La primera línea es la alternativa. Divide en 8 partes el tramo entre cada par de puntos vecinos e intercala, como puntos HEX corrientes, los 7 colores intermedios calculados en OKLCH. Con 2 puntos se convierten en 9; con 3, en 17.
• La segunda línea es la sintaxis in oklch tal cual.

Cuando una propiedad se declara dos veces se aplica la última. Así, un navegador que conoce in oklch usa la segunda línea, y uno que no la conoce la ignora y se queda con la primera.

Mientras la interpolación en OKLCH está activada, la vista previa y la barra del degradado se dibujan con el método de la primera línea, sea cual sea el navegador en que abras la página. La línea alternativa es una aproximación, con los colores intermedios ajustados a sRGB y escritos en HEX, y puede diferir ligeramente de lo que pinta un navegador al interpretar la segunda línea por sí mismo. Si el color es crítico en tu trabajo, pega el CSS y compruébalo en el navegador de destino.

Lo que no se puede hacer con esta herramienta

• Degradados repetidos, como repeating-linear-gradient. Tendrás que anteponer repeating- al nombre de la función en el CSS copiado y ajustar a mano el tramo que ocupan los puntos.
• El tamaño de un degradado radial (closest-side y similares) y una posición central dada con coordenadas, como at 30% 70%
• Fondos con varios degradados superpuestos, separados por comas
• Posiciones de los puntos en px en lugar de porcentajes
• Otros métodos de interpolación, como in hsl o in oklab