Generador de CSS de Degradado
Crea un degradado CSS de dos colores y copia el código al instante.
Esta herramienta se ejecuta completamente en tu navegador. Tus archivos nunca se suben a un servidor.
background: linear-gradient(90deg, #3b82f6, #a855f7);
Qué hace esta herramienta
Construye un fondo CSS linear-gradient() a partir de dos colores y un ángulo que eliges, mostrando una vista previa en vivo y el código CSS listo para usar.
Cómo utilizarla
Elige el Color A y el Color B con los selectores de color y ajusta el ángulo en grados. La vista previa del degradado y el código CSS debajo se actualizan al instante al cambiar cualquier valor; haz clic en el icono de copiar para copiar el CSS.
Ejemplo resuelto
Con los valores predeterminados de #3b82f6 (azul), #a855f7 (morado) y un ángulo de 90°, la herramienta genera background: linear-gradient(90deg, #3b82f6, #a855f7); — un degradado que va de izquierda a derecha, ya que 90deg apunta la línea del degradado hacia la derecha en el sistema de ángulos de CSS.
Cómo funcionan los ángulos de degradado
En CSS, 0deg apunta el degradado de abajo hacia arriba, y el ángulo aumenta en sentido horario, así que 90deg va de izquierda a derecha, 180deg de arriba hacia abajo y 270deg de derecha a izquierda. Esto difiere de la convención de una brújula o de ángulos matemáticos estándar, lo que suele generar confusión al escribir degradados a mano.
Limitaciones
Esto genera solo un degradado lineal simple de dos colores — no admite degradados radiales o cónicos, más de dos puntos de color, ni posiciones de parada personalizadas, como colocar un color al 20% en lugar de repartirlos por igual. Para degradados más allá de esto, copia el CSS generado como punto de partida y edita a mano la función linear-gradient() para añadir más paradas.
Alcance, fuentes y privacidad
La función CSS linear-gradient() forma parte de la especificación CSS Images y es compatible con todos los navegadores modernos. El degradado se calcula y renderiza enteramente en tu navegador; los colores que eliges nunca se suben.
Preguntas Frecuentes
- ¿Qué tipos de degradado admite esto?
- Actualmente degradados lineales con ángulo ajustable — el tipo más común usado en fondos, botones y secciones hero.
- ¿Puedo usar más de dos colores?
- Esta herramienta admite dos colores para un degradado limpio y sencillo — puedes ampliar manualmente el CSS generado con más puntos de color si lo necesitas.
- ¿Funciona en todos los navegadores?
- Sí, la función CSS linear-gradient() es compatible con todos los navegadores modernos.