Editor de degradados de color OKLCH

Convierte tu paleta OKLCH en degradados lineales, radiales y cónicos listos para CSS, Tailwind o Figma. Tus 11 stops se cargan automáticamente desde el editor principal — sin exportar, sin pegar HEX a mano.

Editor

Crea tu degradado en espacio oklch a partir de los stops de tu paleta. Tipo, ángulo y stops se actualizan en vivo. Copia el CSS resultante y pégalo en tu hoja de estilos o framework.

Plantillas rápidas

Combinaciones preconfiguradas que aplican stops habituales. Pulsa cualquier tarjeta para llevarla al editor de arriba o copia su CSS directo.

¿Qué es un degradado de color?

Un degradado (gradient) es una transición continua entre dos o más colores. En diseño digital se usa para crear profundidad, dirección visual, fondos atmosféricos o destacar elementos sin ruido tipográfico.

Tipos de degradado en CSS

• Lineal (linear-gradient): los colores se distribuyen a lo largo de un eje en un ángulo definido. El más común.
• Radial (radial-gradient): los colores se distribuyen desde un punto central hacia fuera. Útil para focos de luz o efectos de halo.
• Cónico (conic-gradient): los colores rotan alrededor de un punto. Se usa para gráficos circulares, ruletas o efectos rainbow.
• Mesh (multistop): combinación de varios degradados radiales con blur, popularizado por Stripe y Linear. CSS lo aproxima con varios radial-gradient superpuestos.

¿Por qué OKLCH para degradados?

OKLCH es un espacio de color perceptualmente uniforme. Cuando interpolas entre dos colores en sRGB tradicional, los pasos intermedios suelen pasar por una "zona gris" o aplanarse — sobre todo si los dos extremos son colores opuestos.

En OKLCH, el camino entre dos colores recorre tonos saturados intermedios sin caer en el gris. Por eso un degradado linear-gradient(in oklch, ...) se ve más vivo y limpio que el equivalente en sRGB.

Cómo conectar tu paleta a los degradados

1. Crea o abre tu paleta en el editor principal. Se guarda automáticamente en tu navegador.
2. Vuelve a esta página: tus 11 stops aparecen arriba en la sección "Tu paleta guardada".
3. Cada generador rápido te deja elegir dos stops. La preview y el CSS se actualizan al instante.
4. Pulsa Copiar CSS y pega en tu hoja de estilos, Tailwind config o herramienta de diseño.
5. Para más stops, ángulos personalizados o mesh, usa el editor de arriba.

Trucos para degradados que no se vean planos

• No uses dos stops contiguos. Combina, por ejemplo, el 200 con el 700 — la diferencia de luminosidad da carácter al gradiente.
• Mantén la familia cromática. Si los dos stops son del mismo matiz, la transición es suave; mezclar matices opuestos puede generar zonas opacas.
• Diagonales 135° antes que verticales. Un degradado a 135° resulta más cinemático que uno horizontal puro.
• Usa in oklch. Garantiza interpolación perceptualmente uniforme — sin la banda gris del sRGB.