Generador de Degradados
Crea degradados CSS con preview en vivo — linear, radial y conic.
135°
background: linear-gradient(135deg, #6C5CE7, #00B894);Presets:
Tipos de Degradado CSS
Linear
linear-gradient(angle, color1, color2) — Degradado lineal en cualquier dirección. El más versátil y usado.
⭕ Radial
radial-gradient(circle, color1, color2) — Degradado circular desde el centro. Ideal para fondos y efectos de luz.
🔘 Conic
conic-gradient(from angle, color1, color2) — Degradado angular. Perfecto para gráficos tipo pie y fondos creativos.
Preguntas Frecuentes
¿Qué tipo de degradado es más usado?
Linear-gradient es el más común (~80% de uso). Radial es popular para fondos y conic para gráficos circulares.
¿Puedo agregar más de 2 colores?
En esta herramienta usamos 2 colores para simplicidad. En CSS puedes agregar tantos stops como necesites.
¿Los degradados afectan el rendimiento?
Los degradados CSS son renderizados por GPU y tienen impacto mínimo en rendimiento. Son más eficientes que imágenes de fondo.
¿Puedo animar degradados?
CSS no anima
background-image directamente. Usa @property para animar las custom properties de los colores.¿Qué navegadores soportan conic-gradient?
Chrome 69+, Safari 12.1+, Firefox 83+. Para IE/Edge antiguo, usa un fallback de color sólido.