Crea gradientes lineales, radiales y cónicos con paradas ilimitadas, interpolación compatible con OKLCH y salida de utilidades Tailwind v4. Vista previa en vivo, más de 30 presets, en tu navegador.
Lineal mezcla a lo largo de una línea recta en un ángulo determinado (0° = hacia arriba, 90° = hacia la derecha). Radial mezcla desde un punto central hacia afuera — círculo o elipse, con palabras clave de tamaño como farthest-corner. Cónico rota alrededor de un punto central — las paradas de color se sitúan en ángulos como las manecillas de un reloj. Cónico es ideal para gráficos circulares, lecturas de diales y fondos sintéticos tipo color-wheel.
Al hacer transiciones entre tonos no análogos — p. ej. azul → amarillo o rojo → verde. La interpolación sRGB predeterminada pasa por un punto medio gris turbio; OKLCH (CSS Color Module 4 in oklch) mantiene el punto medio vivo porque interpola en un espacio perceptualmente uniforme. Para gradientes de dos paradas entre tonos similares, la diferencia es pequeña. Para gradientes de varias paradas o con amplio rango de tonos, OKLCH es muchísimo mejor.
Lineal / radial / cónico, suavidad OKLCH, compatible con Tailwind — y unos pequeños detalles que lo hacen realmente divertido de usar.
Lineal con ángulo de 0 a 360°, radial con círculo/elipse + tamaño + posición, cónico con ángulo inicial + posición. Todos generan sintaxis conforme al estándar CSS Images Module Level 4.
Añade paradas en cualquier porcentaje, arrastra el deslizador de posición para ajustarlas con precisión, haz clic en la muestra para elegir un color o pegar un HEX. Las paradas se ordenan automáticamente en la salida. Haz clic en la × para eliminarlas (mínimo 2 paradas).
Cambia entre la interpolación sRGB predeterminada y la moderna in oklch. OKLCH ofrece puntos medios perceptualmente más suaves — sin franjas grises turbias en los saltos de tono. Degrada con elegancia en navegadores que aún no admiten CSS Color 4.
Tres paneles de salida se actualizan en vivo: CSS puro (background-image: linear-gradient(...)), utilidad de valor arbitrario de Tailwind v4 (bg-[linear-gradient(...)]) y un fragmento de design token JSON listo para Style Dictionary o Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — haz clic para cargarlos y ajustarlos. Cada preset es un punto de partida real con calidad de producción, no solo un nombre.
Vista previa renderizada con background-image nativo, así lo que ves es exactamente lo que producirá tu hoja de estilos. Cada píxel se ejecuta localmente — abre DevTools → Network y verifica cero peticiones salientes.
Cuatro pasos para pasar de un lienzo en blanco a CSS, Tailwind o JSON listos para producción.
Lineal para fondos, cabeceras y secciones hero. Radial para focos, viñetas y botones con brillo. Cónico para gráficos circulares, ruedas de color y fondos sintéticos de moda. Cambia entre ellos con las pestañas — tus paradas de color se conservan al cambiar.
Haz clic en la muestra de color para abrir un selector, o pega un HEX directamente en el campo. Arrastra el deslizador para fijar la posición de la parada entre 0 y 100%. Haz clic en + Añadir parada para insertar una nueva en el mayor hueco (con un color de punto medio). Hasta 12 paradas en total.
Para lineal, fija el ángulo (0° apunta arriba, 90° a la derecha). Para radial, elige forma, palabra clave de tamaño y posición del centro. Para cónico, fija el ángulo inicial. Cambia Interpolación de color a OKLCH para puntos medios perceptualmente suaves en gradientes de varios tonos.
Tres paneles se actualizan en vivo: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (forma de design token). Usa el icono de copiar de cada uno, o pulsa Descargar CSS para guardar un archivo gradient.css listo para añadirlo a un proyecto.
Cuatro escenarios habituales en los que una herramienta de navegador con privacidad supera a abrir Figma + un sitio de gradientes aparte.
Elige un preset cercano a tu marca, coloca tus dos colores corporativos en las paradas, cambia a interpolación OKLCH para un punto medio limpio. Copia el CSS y pégalo en la hoja de estilos de tu hero. Tiempo total: menos de 2 minutos.
Crea una vez un gradiente de marca de 3 paradas, cópialo como design token JSON y añádelo a Style Dictionary / Figma Tokens. Ahora cada botón y cada tarjeta en cada plataforma usa el mismo gradiente por referencia. Actualízalo en un solo sitio y se propaga a todas partes.
Los gradientes cónicos sintéticos son perfectos para visualizaciones tipo gráfico circular, diales de progreso o estados shimmer de «cargando datos». Elige el tipo cónico, fija el ángulo inicial, coloca paradas en los porcentajes correctos — la matemática mapea ángulos de 0 a 360° con posiciones porcentuales con exactitud.
Crea el gradiente, fija la relación de aspecto que necesites (16:9 para diapositivas, 1:1 para IG, 3:1 para cabecera de X) y haz una captura de la vista previa. O copia el CSS en un archivo HTML puntual y haz una captura en tu navegador al tamaño de píxel exacto que necesitas.
Tus colores y gradientes nunca salen de tu dispositivo. Abre DevTools → Network y verás cero peticiones salientes durante cualquier operación.
background-image CSS nativo — así el gradiente renderizado coincide exactamente con lo que producirá tu hoja de estilos en los navegadores de tus usuarios.
Lecturas seleccionadas sobre gradientes CSS, interpolación OKLCH y sistemas de design tokens.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Lineal mezcla a lo largo de una línea recta en un ángulo determinado (0° = hacia arriba, 90° = hacia la derecha). Radial mezcla desde un punto central hacia afuera — círculo o elipse, con palabras clave de tamaño como farthest-corner. Cónico rota alrededor de un punto central — las paradas de color se sitúan en ángulos como las manecillas de un reloj. Cónico es ideal para gráficos circulares, lecturas de diales y fondos sintéticos tipo color-wheel.
Al hacer transiciones entre tonos no análogos — p. ej. azul → amarillo o rojo → verde. La interpolación sRGB predeterminada pasa por un punto medio gris turbio; OKLCH (CSS Color Module 4 in oklch) mantiene el punto medio vivo porque interpola en un espacio perceptualmente uniforme. Para gradientes de dos paradas entre tonos similares, la diferencia es pequeña. Para gradientes de varias paradas o con amplio rango de tonos, OKLCH es muchísimo mejor.
Una utilidad de valor arbitrario que puedes pegar directamente en JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. No requiere cambios en tailwind.config.js; funciona en cualquier proyecto con Tailwind 4. Si prefieres tokens de color con nombre, copia el CSS y conviértelo a mano.
Los gradientes lineales y radiales son universalmente compatibles desde 2014. Los gradientes cónicos llegaron a todos los navegadores evergreen en 2021. La palabra clave de interpolación in oklch está disponible en Chrome 111+, Safari 16.2+ y Firefox 113+. Si necesitas dar soporte a navegadores antiguos, usa la interpolación sRGB predeterminada — la diferencia visual importa más en gradientes de varias paradas con saltos de tono.
No. La generación de la cadena del gradiente, la serialización en CSS / Tailwind / JSON y la vista previa en vivo se ejecutan en JavaScript en tu dispositivo. Abre DevTools → Network y verás cero peticiones salientes durante cualquier operación. Pega colores de marca, tokens internos — nada sale de tu portátil.