Generar degradados CSS
El generador de degradados CSS construye un degradado lineal, radial o cónico y te da el CSS. Interpola en OKLab en lugar de en sRGB, que es lo que evita que un degradado de azul a amarillo se vuelva gris en el medio, y escribe el resultado dos veces: una como degradado moderno con `in oklab` y otra como la misma curva muestreada en doce paradas normales, para que los navegadores antiguos vean la misma imagen.
Tipo
El color cambia en línea recta según el ángulo elegido. Es la opción habitual.
Puntos (2)
- 0%
- 100%
CSS
background: linear-gradient(135deg, #00696f 0.0%, #2d726e 9.1%, #467b6c 18.2%, #5b846a 27.3%, #6f8c67 36.4%, #839563 45.5%, #969d5e 54.5%, #a9a557 63.6%, #bcad4f 72.7%, #cfb544 81.8%, #e2bd35 90.9%, #f5c518 100.0%);
background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);Dos declaraciones en ese orden. Los navegadores que entienden in oklab usan la segunda; los antiguos conservan la primera con la misma curva expresada mediante puntos de color.
La diferencia que marca el espacio de color
Los mismos puntos interpolados de dos maneras. La diferencia es mayor cuando los colores están en lados opuestos del círculo cromático. Prueba azul y amarillo.
sRGB: predeterminado
OKLab: in oklab
Versión alternativa de 12 puntos
¿Cómo funciona Generar degradados CSS?
Un degradado es una regla para producir cada color entre otros dos, y toda la cuestión está en en qué espacio hace esa producción. El valor por defecto es sRGB, y la interpolación sRGB tiene un fallo famoso: el punto medio de dos colores saturados de lados opuestos del círculo cromático no es un color entre ellos, es un lodo desaturado. De azul a amarillo se va a gris. De rojo a verde, a marrón. No es un bug del navegador —es lo que hace el promediar tres canales con codificación gamma.
Por qué lo arregla OKLab
OKLab es un espacio perceptual: sus tres ejes son aproximadamente claridad, verde-a-rojo y azul-a-amarillo, y las distancias en él coinciden con las que reporta el ojo. Promediar dos colores ahí da el color que una persona llamaría a medio camino entre ellos, porque para eso se construyó el espacio. CSS Color 4 permite pedirlo directamente con in oklab, y todos los navegadores actuales lo admiten.
Qué está haciendo el respaldo
in oklab llegó a los navegadores en 2023. En lugar de dejar a los más viejos con un degradado visiblemente distinto, esta herramienta muestrea la curva OKLab en doce puntos y los escribe como paradas de color ordinarias. El navegador viejo interpola entonces en sRGB —pero solo a lo largo de segmentos cortos cuyos extremos ya están sobre la curva correcta, y en un segmento tan corto los dos espacios no discrepan a la vista—. Se emiten ambas declaraciones, en ese orden, de modo que un navegador que entiende la segunda la usa y uno que no se queda con la primera.
La otra cosa que sale mal con los degradados
El banding. Un degradado sobre una zona amplia atraviesa un número limitado de valores de 8 bits, y sobre una superficie grande y plana los pasos se ven como franjas. Nada dentro del CSS lo arregla, porque la pantalla de verdad se queda sin valores; lo que lo arregla es una pequeña cantidad de ruido por encima —un PNG en mosaico de unos cientos de bytes al 3% de opacidad, o una capa SVG feTurbulence—. Si tu degradado hero se ve con franjas, eso es lo que estás viendo, y ninguna cantidad extra de paradas de color lo arreglará.
Y una palabra sobre usarlos directamente
Un degradado detrás de texto es un problema de contraste: la relación cambia a lo largo del elemento, así que la esquina que supera y la que falla son ambas reales. Si el texto tiene que ir sobre uno, comprueba los extremos en lugar del medio, o pon el texto sobre un panel sólido encima del degradado.
Paradas y una dirección
linear, 135° #00696f 0% #f5c518 100%
El CSS, dos veces
background: linear-gradient(135deg, #00696f 0.0%, #2a7767 9.1%, #4b855c 18.2%, …); background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);
¿Qué opciones y casos límite admite Generar degradados CSS?
| Parámetro | Tipo | Valor predeterminado | Comportamiento y casos límite |
|---|---|---|---|
| Lineal | ángulo | 135deg | 0deg apunta hacia arriba, 90deg apunta hacia la derecha. El ángulo es la dirección en la que viajan los colores, no la dirección en la que se inclina la línea. |
| Radial | círculo al centro | — | Los colores se extienden hacia afuera desde el centro. `circle` mantiene la forma redonda en una caja no cuadrada; el valor por defecto `ellipse` se estira con el elemento. |
| Cónico | desde ángulo | 135deg | Los colores barren alrededor del centro. Es la base de cada gráfico circular y dial de CSS, y del anillo de tonos en un selector de colores. |
| in oklab | palabra clave | on | Interpola perceptualmente. Compatible desde 2023 — Chrome 111, Safari 16.2, Firefox 113. Desactívalo para ver qué hace un gradiente normal con las mismas paradas. |
| Alternativa | 12 paradas | automática | La curva OKLab muestreada en paradas simples, emitida como la primera de dos declaraciones para que navegadores antiguos coincidan. |
| Posición de la parada | 0–100% | equidistantes | Dónde en la línea de gradiente se ubica el color. Dos paradas en la misma posición crean un borde duro en lugar de una transición. |
| Color de la parada | cualquier notación | — | Hex, rgb(), hsl(), oklch() o un nombre de color CSS. Se mantiene el alfa, y un gradiente hacia `transparent` debe especificar el color con alfa 0 en lugar de la palabra clave. |
| Paradas | 2 o más | 2 | Las nuevas paradas se ubican en el espacio más amplio, tomando el color que ya tiene la curva en ese punto, por lo que añadir una no cambia el gradiente. |
Preguntas frecuentes
¿Cómo hago un degradado CSS?
Pon `background: linear-gradient(135deg, #00696f, #f5c518)` —un ángulo seguido de dos o más colores—. 0deg va de abajo hacia arriba y 90deg de izquierda a derecha. Añade un porcentaje tras un color para fijarlo a una posición de la línea, usa `radial-gradient` para colores que irradian desde un punto y `conic-gradient` para colores que giran alrededor de uno. Esta página escribe los tres, con el arreglo de la interpolación y un respaldo, a partir de las paradas que tú definas.
¿Por qué mi degradado se pone gris en el medio?
Porque el navegador promedia canales sRGB con codificación gamma, y el promedio de dos colores saturados de lados opuestos del círculo cromático es un color desaturado. De azul a amarillo es el caso clásico. Añadir `in oklab` tras el ángulo lo arregla —la interpolación ocurre entonces en un espacio perceptual donde el punto medio es el color que llamarías a medio camino—. Para navegadores antiguos, usa el respaldo de doce paradas que esta herramienta emite junto a él.
¿Es seguro usar `in oklab` en producción?
Sí, con el respaldo. Llegó con Chrome 111, Safari 16.2 y Firefox 113, lo que cubre la mayoría aplastante del tráfico en 2026. Cualquier navegador más viejo ignora la declaración entera por inválida —por eso la versión de paradas simples se emite primero: CSS toma la última declaración que entiende, así que los navegadores viejos se quedan con el respaldo y los nuevos con la versión OKLab. Ninguno ve nunca un fondo roto.
¿Por qué mi degradado tiene franjas visibles?
Eso es banding, y es una limitación de la pantalla más que del CSS. Sobre una zona amplia un degradado tiene que atravesar un conjunto limitado de valores de 8 bits, y los pasos se vuelven visibles como bandas —peor en degradados oscuros sutiles, que es donde los valores están más separados perceptualmente—. Más paradas de color no ayudarán porque los valores sencillamente no existen. Una textura de ruido tenue por encima sí: un PNG en mosaico a un 3% de opacidad aproximadamente, o una capa SVG feTurbulence.
¿Puedo poner texto sobre un degradado?
Puedes, pero la relación de contraste es distinta en cada punto, así que «cumple» no es un único hecho sobre el elemento. Comprueba el punto más claro y el más oscuro que el texto cruza de verdad, y toma el peor de los dos como la relación real. Cuando el rango es amplio, la respuesta práctica es poner el texto sobre un panel sólido o semitransparente encima del degradado, y no directamente sobre él.
¿Cómo desvanezco un degradado hacia transparente?
No con la palabra clave `transparent`. En varios motores se resuelve como negro transparente, así que desvanecer un rojo hacia él atraviesa rosas turbios y oscuros. Usa en su lugar el mismo color con alfa cero —`#ff0000` a `#ff000000`, o `rgb(255 0 0 / 0)`— y el tono se mantiene hasta el final. Interpolar en OKLab reduce el efecto, pero no elimina la causa.
¿Qué herramientas relacionadas debería usar después?
- Elegir colorElige un color y léelo en HEX, RGB, HSL, OKLCH o CMYK
- Comprobar contrasteComprueba texto y fondo contra WCAG 2.2 y da el color que pasa
- Códigos de colorTodos los nombres de color CSS con su HEX, RGB y HSL
- Test de daltonismoHaz un test de daltonismo y simula cómo ve las imágenes quien lo tiene