ToolNestGenerador de Degradados CSS Gratis
Última actualización: 17 de octubre de 2026
Respuesta rápida: Los degradados están en todas partes — secciones hero, botones, tarjetas, fondos de apps — y escribirlos a mano significa adivinar códigos hex y posiciones de paradas a ciegas. Este generador de degradados CSS gratuito te permite diseñar degradados visualmente: arrastra las paradas de color sobre la barra de vista previa, cambia entre lineal, radial y cónico, y copia el CSS final o una clase de Tailwind lista para pegar. Nueve preajustes seleccionados y un botón de degradado aleatorio te ponen en marcha en segundos. Todo funciona en tu navegador; nada se sube.
Ángulo
135°
Arrastra los puntos para mover las paradas · haz doble clic en la barra para añadir una parada · haz clic en un punto y edita su color abajo.
Preajustes
CSS
Clase de Tailwind
✓ Gratis para siempre · ✓ Sin registro · ✓ Lo que escribes permanece en tu navegador — nunca se envía a nuestros servidores.
Cómo usar Generador de Degradados CSS
- Elige un tipo de degradado: lineal (mezcla recta), radial (irradia desde un punto) o cónico (gira alrededor de un centro).
- Arrastra los puntos de la barra de vista previa para colocar las paradas de color — o haz doble clic en la barra para añadir una parada nueva (hasta 10).
- Haz clic en un punto y cambia su color con el selector; ajusta la posición exacta con el deslizador.
- Para degradados lineales y cónicos, fija el ángulo con el deslizador o los botones de brújula. Para el radial, elige la forma y la posición del centro.
- Copia el CSS o la clase de Tailwind y pégalo directamente en tu hoja de estilos o tu HTML.
Por qué usar Generador de Degradados CSS
- Paradas de color arrastrables — agarra los puntos de la barra de vista previa y deslízalos; sin escribir porcentajes a ciegas.
- Tres tipos de degradado — lineal, radial (círculo/elipse, 9 posiciones) y cónico, cada uno con sus controles de ángulo y forma.
- 9 preajustes + aleatorio — empieza desde una paleta probada o genera una combinación nueva con un clic.
- Salida CSS + Tailwind — copia CSS estándar limpio o una clase de valor arbitrario de Tailwind lista como
bg-[linear-gradient(...)]. - Privado e instantáneo — todo se renderiza en tu navegador; sin registro, sin subidas, sin recargas.
Casos de uso comunes
- Secciones hero: Un degradado a pantalla completa detrás de tu titular supera a un color plano — parte del preajuste Atardecer u Océano, ajusta el ángulo y pega el CSS en tu clase hero.
- Botones y llamadas a la acción: Los degradados lineales sutiles de dos paradas dan dimensión a los botones; el CSS copiado va directo a tu hoja de botones.
- Tarjetas y paneles: Los degradados radiales crean brillos suaves detrás de las tarjetas sin archivos de imagen — páginas más ligeras y rápidas.
- Superposiciones sobre imágenes: Un degradado oscuro (transparente → negro) bajo el texto sobre una foto mantiene los titulares legibles — créalo aquí y combínalo con la foto usando fondos múltiples.
- Proyectos Tailwind: Olvídate de escribir clases de valor arbitrario a mano: diseña visualmente, copia la clase
bg-[...]generada y pégala en tu HTML.
Generador de Degradados CSS frente a las alternativas
- Sitios de degradados de un solo propósito (cssgradient.io, ColorZilla, etc.): Generan degradados bien, pero la mayoría están envueltos en diseños cargados de anuncios y ninguno te entrega una clase de valor arbitrario de Tailwind lista — traduces el CSS tú mismo. Esta página te da ambas salidas en una sola sesión de diseño, en una página rápida y limpia.
- Escribir el CSS del degradado a mano: Preciso y gratis — la opción correcta cuando dominas la sintaxis. El generador vale la pena mientras diseñas: ver la mezcla en vivo supera el ciclo de guardar-actualizar-adivinar, y siempre puedes retocar el CSS copiado después.
- Figma y herramientas de diseño: Geniales para maquetas, pero llevar CSS de producción desde una herramienta de diseño implica exportar, limpiar y convertir — y la exportación de degradados de Figma no habla Tailwind. Diseña aquí cuando el destino sea código.
- Chatbots de IA: Te escriben un degradado, pero no pueden mostrártelo, y a veces inventan sintaxis inválida o se equivocan con la convención del ángulo (0deg = hacia arriba los confunde). Una herramienta visual muestra la verdad antes de pegar.
Diseñalo donde puedas verlo y copia el código. Usa la salida CSS para hojas de estilos y la clase de Tailwind para proyectos utility-first — y cuando el diseño pida profundidad más allá del color, combina el degradado con nuestro visualizador de sombras CSS para el efecto completo.
Preguntas frecuentes
¿Qué es un degradado CSS?
Un degradado CSS es una mezcla suave entre dos o más colores, dibujada por el navegador como imagen de fondo — sin archivo de imagen. Defines paradas de color (un color más su posición, p. ej.
#ff7e5f 0%) y el navegador interpola todo lo intermedio. Como son generados, se ven nítidos a cualquier tamaño y casi no pesan.¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?
El lineal mezcla colores en línea recta con un ángulo (
linear-gradient(135deg, ...)) — el caballo de batalla para fondos y botones. El radial irradia desde un punto central (radial-gradient(circle at center, ...)) — ideal para brillos y viñetas. El cónico barre los colores alrededor de un centro como una rueda de color (conic-gradient(from 0deg, ...)) — perfecto para gráficos circulares y efectos prismáticos. Este generador crea los tres.¿Cómo uso un degradado en Tailwind CSS?
Tailwind no tiene una sintaxis de una clase para degradados personalizados con varias paradas, pero admite valores arbitrarios: pega la clase que genera esta herramienta, p. ej.
bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)] (los guiones bajos representan espacios). Funciona en Tailwind v3 y v4 con el motor JIT, que es lo habitual en proyectos modernos.¿Cuántas paradas de color puede tener un degradado?
El CSS no pone un límite práctico, pero la legibilidad sufre con demasiadas. Esta herramienta admite hasta 10 paradas y requiere un mínimo de 2 — arrástralas por la barra, haz doble clic para añadir y usa la ✕ de cada fila para eliminar.
¿Los degradados CSS funcionan en todos los navegadores?
Sí — los degradados lineales y radiales funcionan en todos los navegadores modernos desde hace más de una década, y los cónicos son compatibles con todos los navegadores actuales (Chrome/Edge 69+, Firefox 83+, Safari 12.1+). Ya no hacen falta prefijos. El código que genera esta herramienta es CSS estándar sin sintaxis experimental.
¿Cómo hago texto con degradado?
Aplica el degradado al texto con
background: linear-gradient(...); -webkit-background-clip: text; color: transparent;. El truco de background-clip funciona en todos los navegadores modernos (el prefijo -webkit- sigue siendo necesario incluso en Firefox). Crea tu degradado arriba, copia el CSS y envuélvelo con esas dos líneas extra.¿Por qué mi degradado se ve a rayas o con bandas?
Es el banding de color: los monitores no siempre renderizan mezclas ultrasuaves entre tonos parecidos, sobre todo en degradados oscuros. Soluciones: añade una parada intermedia entre los dos colores con bandas para acortar cada mezcla, o superpón un susurro de ruido. El bandeado es una limitación de la pantalla, no un error de tu CSS.
¿Puedo animar un degradado CSS?
No directamente —
background-image no es animable. El truco habitual es animar background-position sobre un degradado sobredimensionado (background-size: 200% 200%) con @keyframes, que desliza el degradado para un efecto fluido. Genera tu degradado aquí y añade los keyframes para el movimiento.