Saltar al contenido
Dogu SangjaCaja de herramientasTodas las herramientas

Generador de degradados CSSBeta

Crea degradados lineales, radiales y cónicos de forma visual y copia el CSS del fondo. La interpolación OKLCH opcional mantiene los tonos intermedios vivos.

Preajustes

Tipo
deg

Puntos de color

Haz clic en la barra para añadir un punto ahí y arrastra un tirador para moverlo. Con el teclado, las flechas desplazan el punto un 1 % (un 10 % con Mayús) y Supr lo quita.

%
%

CSS

background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);

En vez de memorizar la sintaxis de linear-gradient(...) y escribirla a mano cada vez que necesitas un degradado de fondo, constrúyelo aquí de forma visual y copia el CSS terminado.

Tipos de degradado y su sintaxis

  • Lineal (linear-gradient): Un único ángulo define la dirección. 90deg va de izquierda a derecha, 180deg de arriba a abajo.
  • Radial (radial-gradient): Se extiende hacia fuera desde un punto central. Puedes elegir una forma (círculo o elipse) y una posición central.
  • Cónico (conic-gradient): Los colores giran en el sentido horario alrededor de un punto central. Puedes elegir un ángulo de inicio y una posición central.

Los tres tipos usan una lista de puntos de color. Cada punto es un color más una posición (0-100 %), y esta herramienta te permite añadir, quitar y reordenar entre 2 y 8 de ellos. También puedes arrastrar un tirador de la barra del degradado para mover un punto, o hacer clic en la barra para añadir uno donde quieras.

Por qué la interpolación en OKLCH evita los tonos intermedios apagados

Por defecto, un degradado CSS mezcla en línea recta los valores de rojo, verde y azul de dos colores en el espacio sRGB. El problema es que el brillo percibido no es proporcional a esos números. Por eso, mezclar dos colores muy separados en el círculo cromático hace que el brillo caiga en el punto medio, y se vea apagado o casi gris.

  • De rojo (#ff0000) a verde (#00ff00): el punto medio en sRGB es un oliva apagado (#808000), mientras que en OKLCH es más cercano a un naranja brillante.
  • De azul (#0000ff) a amarillo (#ffff00): el punto medio en sRGB es casi gris (#808080), mientras que en OKLCH es más cercano a un turquesa vivo.

OKLCH separa la luminosidad (L), el croma (C) y el matiz (H) en sus propios ejes, así que es mucho más fácil desplazar el matiz mientras la luminosidad se mantiene constante, y el punto medio se mantiene vivo como resultado. Activa la opción «Interpolar en OKLCH» de esta herramienta para ver ese cálculo aplicado, tanto en la vista previa como en el CSS copiado.

Compatibilidad con navegadores y la alternativa

Una sintaxis para indicar el método de interpolación de color como in oklch es una incorporación relativamente reciente a la especificación de CSS, así que los navegadores más antiguos pueden no reconocerla. Al activar la interpolación en OKLCH, esta herramienta escribe dos líneas al copiar el CSS:

  1. Una línea alternativa que se ve igual en todas partes, con los colores calculados en OKLCH convertidos en muchos puntos sRGB sencillos
  2. Una línea con la sintaxis real in oklch

Declarar la misma propiedad (background) dos veces hace que CSS aplique la que viene después, así que un navegador que entiende in oklch usa la segunda línea, y uno que no, usa automáticamente la primera. La compatibilidad real sigue cambiando, así que para cualquier proyecto importante conviene comprobarlo directamente con tu propia lista de navegadores objetivo.

Fuentes

Preguntas frecuentes

¿Qué cambia exactamente al activar «Interpolar en OKLCH (in oklch)»? ¿Es seguro usarlo ya?

Por defecto, un degradado CSS mezcla dos colores en línea recta a través del espacio de color sRGB. Al activar in oklch, la mezcla se hace en el espacio OKLCH, lo que mantiene el punto medio más vivo. Al copiar el CSS, esta herramienta escribe dos líneas: primero una alternativa que se ve igual en cualquier navegador (los colores calculados en OKLCH, convertidos en muchos puntos sRGB sencillos), y después la sintaxis real in oklch. Como en CSS gana la declaración posterior de la misma propiedad, los navegadores que entienden in oklch usan la segunda línea, y el resto usa automáticamente la primera. Por eso es seguro pegarlo ahora mismo.

¿Por qué el tono intermedio interpolado en OKLCH se ve distinto de lo que esperaba?

Un degradado de rojo a verde interpolado en sRGB llega en el punto medio a un oliva apagado (#808000). Los mismos dos colores interpolados en OKLCH dan un punto medio más cercano a un naranja brillante. De azul a amarillo, el punto medio en sRGB es casi gris (#808080), mientras que en OKLCH es más cercano a un turquesa vivo. sRGB mezcla números de una forma que no coincide con el brillo que percibe el ojo, así que mezclar dos colores muy separados en el círculo cromático hace que el brillo caiga en el medio y se vea apagado o grisáceo. OKLCH separa la luminosidad del matiz, por lo que resulta mucho más fácil desplazar el matiz mientras el brillo se mantiene constante.

¿Puedo añadir más de 2 puntos de color?

Sí. Esta herramienta admite entre 2 y 8 puntos. El botón «Añadir punto» coloca uno nuevo a mitad de camino entre el último punto y el 100 %, y si haces clic en cualquier lugar de la barra del degradado, se añade ahí un punto con el color que se ve en ese sitio. Puedes cambiar la posición (%) de cualquier punto arrastrando su tirador en la barra o escribiendo un número.

¿Puede generar degradados repetidos, como repeating-linear-gradient?

No. Esta herramienta solo genera linear-gradient, radial-gradient y conic-gradient. Si necesitas una versión repetida, toma el CSS generado, añade el prefijo repeating- al nombre de la función y ajusta las posiciones de los puntos al intervalo de repetición que quieras.

¿Puedo pegar el CSS generado tal cual?

Sí. El botón «Copiar CSS» copia una declaración de background (con OKLCH desactivado) o dos (con OKLCH activado). Si el elemento ya tiene otro color o imagen de fondo, asegúrate de que la línea copiada quede después, para que el degradado sea lo que realmente se aplique al final.

Software de código abierto utilizado: culori (MIT)