El editor de gradientes CSS es una herramienta visual para diseñar gradientes lineales, radiales y cónicos con apilamiento multicapa, 15 opciones de interpolación de espacio de color y exportación del código CSS con un clic. Va más allá de los generadores básicos de gradientes al admitir espacios de color modernos como OKLCH y Display P3, que producen transiciones perceptualmente más suaves entre colores.
Tres tipos de gradiente y sus usos
- Lineal (
linear-gradient) — los colores transicionan a lo largo de una línea recta en un ángulo controlable (0°–360°). El más habitual para fondos de secciones y rellenos de botones - Radial (
radial-gradient) — los colores irradian hacia afuera desde un punto central; posición, forma (círculo o elipse) y tamaño ajustables. Ideal para efectos de foco y reflejos en botones - Cónico (
conic-gradient) — los colores rotan alrededor de un punto central desde un ángulo inicial. Encaja de forma natural con gráficos circulares, anillos de progreso y selectores de rueda de color
Cómo funciona el apilamiento multicapa
Las capas se renderizan de arriba a abajo en la lista. Las capas superiores se renderizan primero; la transparencia (opacity) de cada capa controla cuánto se ve la capa inferior a través de ella. Cada capa tiene su propio tipo de gradiente, paradas de color y posición — son completamente independientes.
Añadir más capas aumenta la longitud del CSS generado. En móvil, limita a 1–2 capas para evitar trabajo de renderizado pesado en dispositivos de baja potencia.
Operaciones con paradas de color: haz clic en la barra de gradiente para añadir una parada, arrástrala para reposicionarla, selecciona una parada para editar su valor de color (admite hex, rgb(), lch(), oklch() y otros) y opacidad. Los gradientes CSS requieren al menos 2 paradas de color — el editor impide eliminar por debajo de ese mínimo.
Elegir un espacio de color
Puntos de partida recomendados
- sRGB — mayor compatibilidad, mejor para producción; todos los navegadores lo gestionan
- OKLCH — perceptualmente uniforme; las transiciones de rojo a azul no producen un punto medio gris sucio
- HSL / HWB — espacios polares; las transiciones de tono se sienten más naturales, evita el problema del "gris intermedio" de sRGB
Opciones de gama amplia
- Display P3 — ~25% más amplio que sRGB; diferencia visible solo en pantallas con capacidad P3 (iPhone y Mac modernos)
- Rec. 2020 — gama ultra amplia, diferencia despreciable respecto a sRGB en pantallas normales
- ProPhoto RGB — solo para flujos de trabajo de impresión
Los espacios de color polares (HSL, HWB, LCH, OKLCH) también exponen una opción de dirección de interpolación de tono: ruta más corta (por defecto), ruta más larga, creciente o decreciente. Esto controla en qué dirección rota el tono alrededor de la rueda de color, evitando saltos inesperados de color a mitad del gradiente.
Nota de compatibilidad de navegadores
La sintaxis color-interpolation-method (para especificar el espacio de color y la interpolación de tono) es una característica de CSS Color Level 4. El soporte completo requiere Chrome 111+, Safari 16.2+ o Firefox 113+. Si tu audiencia incluye navegadores más antiguos, usa sRGB como base y prueba cómo degrada el gradiente. La herramienta muestra una advertencia si tu navegador actual no admite el formato de color en uso.