Degradados CSS
Crea degradados CSS hermosos. Lineales y radiales con vista previa en vivo.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Reportar un problema
¿Encontraste un error o tienes una sugerencia? Ayúdanos a mejorar esta herramienta.
¿Qué es esta herramienta?
El Generador de degradados CSS crea fondos degradados lineales y radiales con vista previa visual. Genera código CSS listo para producción para las funciones linear-gradient() y radial-gradient(). Admite múltiples paradas de color, ángulos y transparencia. Imprescindible para el diseño web moderno.
Cómo usar
- 1
Añadir colores
Haz clic para añadir paradas de color al degradado.
- 2
Ajustar la configuración
Establece el ángulo, el tipo (lineal/radial) y las posiciones.
- 3
Copiar CSS
Obtén el código CSS generado.
Preguntas frecuentes
¿Qué es un degradado lineal CSS?
Un degradado lineal transiciona suavemente entre dos o más colores a lo largo de una línea recta. Sintaxis: background: linear-gradient(angle, color1, color2, ...). Ángulos habituales: 0° (de abajo arriba), 90° (de izquierda a derecha), 180° (de arriba abajo).
¿Puedo usarlo en CSS?
Sí, genera código CSS estándar de degradados.
¿Puedo establecer la posición de cada parada de color?
Sí. Cada parada de color tiene un campo de posición del 0 al 100 (porcentaje). Puedes añadir o quitar paradas según sea necesario, con un mínimo de dos. El CSS generado siempre incluye la posición de cada parada.