Generador de Degradados
Crea degradados CSS lineales y radiales visualmente y copia el código CSS.
100% privado: todo funciona en tu navegador
Cómo usarla
- 1
Elige Lineal o Radial: los degradados lineales admiten un ángulo de 0° a 360°.
- 2
Elige el color de cada parada y arrastra su control para ajustar la posición (0–100 %).
- 3
Añade hasta ocho paradas o elimina las que no necesites.
- 4
Copia el CSS generado y pégalo en tu hoja de estilos.
Ejemplos
Azul a violeta (por defecto)
Entrada
Lineal · 135° · #3B82F6 0% → #8B5CF6 100%Salida
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);Radial con tres paradas
Entrada
Radial · #F59E0B → #EF4444 → #8B5CF6Salida
background: radial-gradient(circle, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);Preguntas frecuentes
¿Cuál es la diferencia entre degradados lineales y radiales?
Un degradado lineal mezcla los colores a lo largo de una línea recta según el ángulo elegido; uno radial irradia desde el centro hacia fuera.
¿Qué navegadores admiten el CSS generado?
Todos los navegadores modernos admiten linear-gradient() y radial-gradient() estándar — no hacen falta prefijos de proveedor.
¿Cuántas paradas de color puedo usar?
Hasta ocho. Cada parada tiene su propio color y un control de posición de 0 % a 100 %.