Inicio / CSS y color / Generador de degradados CSS
Generador de degradados CSS
Ajusta dos colores y un ángulo, observa cómo cambia la vista previa y copia una línea de CSS lista para pegar en tu hoja de estilos. Sin imágenes ni peticiones extra: lo dibuja el navegador.
Cómo se usa
- Elige los dos colores.
- Selecciona lineal o radial y mueve el control de ángulo.
- Copia la propiedad background generada.
Ejemplos
- 135° de azul profundo a amarillo da la clásica cabecera diagonal.
- Un degradado radial de un centro claro a un borde oscuro crea un foco suave.
- Dos colores muy próximos generan una textura sutil en vez de una franja evidente.
Preguntas frecuentes
¿Hacia dónde apunta el ángulo?
0deg va de abajo hacia arriba y el ángulo crece en sentido horario, así que 90deg va de izquierda a derecha y 180deg de arriba abajo. Es la dirección hacia la que avanza el degradado, no donde empieza.
¿Por qué mi degradado se ve sucio en el centro?
Porque dos colores opuestos en la rueda pasan por el gris al mezclarse. Elige colores más cercanos en tono o añade una tercera parada para guiar el recorrido por un color que sí quieras.
Herramientas relacionadas
Actualizado: 2026-08-07