UlvixorGenerador de Degradados CSS
Crea degradados CSS lineales o radiales ajustando ángulo, colores y posiciones con una vista previa en vivo, y copia el código `background` listo para pegar en tu hoja de estilos. Todo se genera en tu navegador.
Cómo funciona
- Elige el tipo de degradado: lineal o radial.
- Si es lineal, ajusta el ángulo con el control deslizante (0° a 360°).
- Agrega, quita o ajusta los colores del degradado y su posición (0% a 100%) con los controles de cada uno.
- La vista previa y el código CSS se actualizan al instante con cada cambio.
- Copia la declaración `background` completa con un clic.
Casos de uso
- Crear un fondo con degradado para una landing page o sección de un sitio web.
- Probar distintas combinaciones de colores y ángulos antes de decidir el degradado final.
- Generar un degradado radial para un botón, insignia o elemento destacado.
- Aprender la sintaxis de `linear-gradient()` y `radial-gradient()` de forma visual.
Errores comunes
- Usar solo dos colores en los extremos (0% y 100%) esperando el mismo resultado que con colores intermedios.Agrega colores adicionales en posiciones intermedias (por ejemplo, 50%) para lograr transiciones más elaboradas de tres o más colores, en vez de un simple degradado de dos tonos.
- Confundir el ángulo de un degradado lineal con los grados de un círculo tradicional (0° apuntando a la derecha).En CSS, 0deg apunta hacia arriba y los grados aumentan en sentido horario; 90deg va hacia la derecha y 180deg hacia abajo. Ajusta el ángulo mirando la vista previa en vez de calcularlo mentalmente.
- Copiar solo el valor del degradado y pegarlo donde se espera la declaración completa, o viceversa.El botón de copiar incluye la declaración completa (`background: ...;`), lista para pegar directamente dentro de una regla CSS.
Preguntas frecuentes
No. El degradado se calcula y se previsualiza completamente en tu navegador. Nada se envía a ningún servidor.
No hay un límite fijo. Puedes agregar tantos colores como necesites con el botón 'Agregar color', y ajustar la posición de cada uno de forma independiente.
El degradado lineal transiciona los colores en línea recta según el ángulo elegido. El degradado radial transiciona los colores en círculos concéntricos desde el centro hacia afuera.
Sí, `linear-gradient()` y `radial-gradient()` son parte del estándar CSS y son compatibles con todos los navegadores modernos sin necesidad de prefijos.
Alternativas
Puedes escribir `linear-gradient()` o `radial-gradient()` directamente en tu CSS consultando la documentación de MDN, pero visualizar el resultado requiere guardar y recargar el navegador repetidamente. Esta herramienta muestra el resultado al instante mientras ajustas cada valor.