Imagen
100% en su navegador
Generador de Degradados CSS — Degradados Lineales y Radiales
Cree hermosos degradados CSS visualmente. Degradados lineales, radiales y cónicos con múltiples paradas de color, ángulo ajustable, vista previa en vivo y código para copiar.
90deg
Paradas de color
Código CSS
Generador de Degradados CSS — Diseñe Degradados Visualmente
Cree impresionantes degradados CSS con un editor visual en vivo. Añada tantas paradas de color como desee, elija degradados lineales, radiales o cónicos, ajuste el ángulo y copie el código CSS listo para usar. Perfecto para fondos, botones, tarjetas y secciones hero.
Tipos de degradado
- Lineal: los colores se mezclan a lo largo de una línea recta en cualquier ángulo (0–360°)
- Radial: los colores irradian desde el centro, como círculo o elipse
- Cónico: los colores giran alrededor de un punto central (ideal para ruedas de color y efectos de gráfico circular)
Funciones
- Paradas de color ilimitadas: añada o elimine colores libremente
- Control de posición: deslice cada color de 0% a 100%
- Control de ángulo: rote degradados lineales y cónicos con precisión
- Vista previa en vivo: vea su degradado actualizarse al instante
- Botón aleatorio: genere una combinación de colores nueva para inspirarse
- Salida CSS limpia: copie una sola línea lista para pegar
Cómo usar el CSS
Copie el código generado y aplíquelo a cualquier elemento. Por ejemplo:
.hero {
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}Consejos
- Dos o tres colores suelen verse más limpios que muchos
- Para fondos sutiles, use colores cercanos en la rueda de color
- Para efectos vívidos, use colores complementarios
- Los degradados cónicos son perfectos para spinners de carga y selectores de color
Privacidad
Esta herramienta funciona completamente en su navegador. Nada se sube ni se almacena.