Generador de Degradados CSS
Diseña degradados lineales y radiales visualmente, y luego copia el CSS listo para usar. Todo se actualiza en vivo en tu navegador.
Cómo hacer un degradado CSS
- Elige lineal o radial, y luego define el ángulo para un degradado lineal.
- Elige los colores de tus paradas y define cada posición de 0 a 100.
- Añade o elimina paradas para dar forma a la transición como quieras.
- Copia el CSS generado en tu hoja de estilos o atributo de estilo.
Preguntas Frecuentes
¿Qué es un degradado lineal?
Un degradado lineal mezcla colores a lo largo de una línea recta en el ángulo que elijas, de 0 a 360 grados.
¿Qué es un degradado radial?
Un degradado radial mezcla colores hacia afuera desde un punto central en forma circular o elíptica.
¿Qué significan los números de posición?
Cada posición es un porcentaje a lo largo del degradado, desde 0% al inicio hasta 100% al final. Las paradas se ordenan por posición automáticamente.
¿El degradado funciona en todos los navegadores?
Sí. El CSS generado usa las funciones estándar linear-gradient y radial-gradient compatibles con todos los navegadores modernos.
Herramientas Relacionadas
¿Por qué usar un generador de degradados?
Usa el Generador de Degradados CSS para diseñar transiciones de color suaves visualmente en lugar de adivinar valores en el código, y copia CSS listo para producción al instante.
- Observa cómo cambia el degradado en vivo mientras ajustas colores, ángulos y paradas.
- Copia CSS exacto y válido sin buscar errores de sintaxis.
- Crea fondos de varias paradas para botones, banners y secciones en segundos.
Consejos y Límites
Puedes añadir tantas paradas de color como quieras, y el generador mantiene al menos dos para que el degradado siempre sea válido. Las paradas se ordenan por posición antes de generar el CSS.