Generador de Degradados CSS
Agrega colores, elige lineal o radial, y copia el CSS terminado. La vista previa se actualiza mientras escribes — nada de esto sale de tu navegador.
Diseña el degradado, obtén CSS real
Cada color tiene una posición — de 0% a 100% a lo largo del degradado. Esta herramienta
siempre ordena los colores por posición al generar el CSS
(sin importar el orden en que los agregaste), así que lo que ves
en la vista previa siempre coincide con lo que copias. Cambia
entre Lineal con cualquier ángulo de 0° a 360°,
o pasa a Radial para un degradado que se
expande desde el centro en vez de seguir una línea.
Ejemplo práctico
Dos colores — #667eea en 0% y #764ba2 en 100% — con tipo lineal a 135deg produce:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Pega eso directamente en cualquier archivo CSS o atributo style. Agrega un tercer color en 50% y
el CSS — y la vista previa — se actualizan automáticamente a una
mezcla de tres colores.
Preguntas frecuentes
¿Cuál es la diferencia entre un degradado lineal y uno radial?
Un degradado lineal hace la transición a lo largo de una línea recta con el ángulo que elijas — como un atardecer que pasa de naranja a morado en el cielo. Uno radial se expande en círculos desde un punto central en vez de seguir una línea, como un foco de luz o un resplandor. Ambos usan los mismos colores; solo cambia la forma de la transición.
¿Cómo funciona el ángulo en un degradado lineal?
En CSS, 0deg apunta hacia arriba de la caja y el ángulo aumenta en sentido horario — así que 90deg apunta a la derecha, 180deg hacia abajo y 270deg a la izquierda. Confunde a mucha gente porque 0deg no es 'de izquierda a derecha' como uno esperaría, sino 'hacia arriba'. El control deslizante de ángulo aquí actualiza la vista previa al instante para que no tengas que memorizarlo.
¿Por qué importa la posición de cada color?
La posición (0–100%) marca en qué punto de la línea o el radio ese color queda completamente alcanzado — CSS mezcla suavemente entre los colores a cada lado. Si juntas dos colores muy cerca (por ejemplo 40% y 45%) obtienes una banda de color más marcada en vez de una transición suave, lo cual es un recurso de diseño válido, no un error, si es el efecto que buscas.
¿Necesito prefijos de navegador para que este CSS funcione?
No — linear-gradient() y radial-gradient() llevan años siendo compatibles sin prefijos en todos los navegadores actuales. El CSS que genera esta herramienta está listo para copiar y pegar sin necesitar -webkit- ni -moz-.