Creador de Degradados

Degradados OKLCH perceptualmente uniformes, sin bandas grises, exportación CSS con un clic.

Perfil →Posición0%

Perfil →Posición100%

Ángulo90°Interpolación suave (sin zona muerta)

Biblioteca de degradados

48 combinaciones clásicas de la comunidad — haz clic para aplicar paradas, tipo y ángulo de una vez.

Atardecer

Océano

Bosque

Caramelo

Anochecer

Sutil

Código CSS

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Cómo funciona la herramienta de degradados: crea paradas, ajusta, copia CSS.

2 a 6 paradas con posicionamiento libre, interpolación OKLCH sin bandas borrosas, además de 48 preajustes seleccionados.

01
Crea paradas
2 a 6 paradas: selecciona cada color, arrastra las posiciones o pega valores HEX.
02
Ajusta
Cambia entre lineal, radial o cónico, arrastra el ángulo o aplica un preajuste seleccionado con un clic.
03
Copia
El modo suave expande automáticamente los puntos medios OKLCH; el CSS se pega listo para usar y el enlace lleva tu degradado.

Preguntas frecuentes sobre degradados

Cuatro preguntas que realmente hacen los usuarios.

¿Por qué los degradados se vuelven grises en el medio?: La interpolación RGB atraviesa territorios de baja saturación. La interpolación OKLCH sigue el matiz, por lo que el punto medio se mantiene limpio.
¿Puedo añadir más paradas?: Sí, de 2 a 6 paradas, cada una con su propio color y posición. El modo suave inserta puntos medios OKLCH entre vecinos para que toda la escala se mantenga limpia.
¿Qué navegadores ejecutan el CSS exportado?: Todos los navegadores modernos. La herramienta genera paradas RGB simples, por lo que no se necesita conversión incluso para motores más antiguos.
¿Cómo comparto un degradado?: Cada ajuste se sincroniza en la URL de la página (#g=...). Envía el enlace de la barra de direcciones a un compañero y se abrirá exactamente como lo configuraste.

Después de obtener el resultado

Continúa desde aquí y pon los colores a trabajar.

Generador de escalas

Convierte cualquier color en una escala de sistema de diseño de 11 pasos, perceptualmente uniforme en OKLCH, con contraste WCAG por paso, exporta a Tailwind/CSS/SCSS/JSON.

Convertidor de Color

Escribe cualquier formato (HEX / RGB / HSL / nombre) y conviértelo a todos los espacios de color en tiempo real.

Panel de Paletas

Barra espaciadora para aleatorizar, bloquear, arrastrar para reordenar, compartir por URL — todo lo que un panel de paletas debe hacer.

Comprobador de Contraste

Validación de contraste WCAG 2.1 entre cualquier color de primer plano y fondo.

Cómo funciona la herramienta de degradados: crea paradas, ajusta, copia CSS.

2 a 6 paradas con posicionamiento libre, interpolación OKLCH sin bandas borrosas, además de 48 preajustes seleccionados.

Crea paradas

2 a 6 paradas: selecciona cada color, arrastra las posiciones o pega valores HEX.

Ajusta

Cambia entre lineal, radial o cónico, arrastra el ángulo o aplica un preajuste seleccionado con un clic.

Copia

El modo suave expande automáticamente los puntos medios OKLCH; el CSS se pega listo para usar y el enlace lleva tu degradado.

Preguntas frecuentes sobre degradados

Cuatro preguntas que realmente hacen los usuarios.

¿Por qué los degradados se vuelven grises en el medio?

La interpolación RGB atraviesa territorios de baja saturación. La interpolación OKLCH sigue el matiz, por lo que el punto medio se mantiene limpio.

¿Puedo añadir más paradas?

Sí, de 2 a 6 paradas, cada una con su propio color y posición. El modo suave inserta puntos medios OKLCH entre vecinos para que toda la escala se mantenga limpia.

¿Qué navegadores ejecutan el CSS exportado?

Todos los navegadores modernos. La herramienta genera paradas RGB simples, por lo que no se necesita conversión incluso para motores más antiguos.

¿Cómo comparto un degradado?

Cada ajuste se sincroniza en la URL de la página (#g=...). Envía el enlace de la barra de direcciones a un compañero y se abrirá exactamente como lo configuraste.