Crea gradientes CSS lineales, radiales y cónicos con vista previa en tiempo real
background: linear-gradient(to right, #4F6EF7 0%, #06B6D4 100%);
También podrías necesitar
Los gradientes CSS permiten crear transiciones suaves entre dos o más colores, eliminando la necesidad de imágenes para fondos decorativos y reduciendo el tamaño de página. Un gradiente lineal (linear-gradient) crea una transición a lo largo de una línea recta con dirección configurable. Un gradiente radial (radial-gradient) irradia desde un centro hacia afuera en forma circular o elíptica. Un gradiente cónico (conic-gradient) rota los colores alrededor de un punto central, ideal para gráficos de tarta, ruedas de color y efectos de dial. Los color stops permiten posicionar exactamente dónde empieza y termina cada color dentro del gradiente. Esta herramienta genera el CSS completo con vista previa en tiempo real: elige el tipo, ajusta la dirección, añade tantos stops como necesites y copia el resultado listo para usar en tu proyecto.
¿Cuál es la diferencia entre linear-gradient, radial-gradient y conic-gradient?
linear-gradient crea una transición a lo largo de una línea recta (horizontal, vertical o en ángulo). radial-gradient irradia desde un centro hacia afuera en forma circular — ideal para efectos de iluminación, viñetas o fondos con profundidad. conic-gradient rota los colores alrededor de un punto como las manecillas de un reloj — es el indicado para gráficos de tarta (pie charts), ruedas de color y efectos de dial. Los tres son parte del estándar CSS Level 4 y tienen soporte universal en navegadores modernos.
¿Qué es un color stop en un gradiente?
Un color stop define dónde aparece un color específico dentro del gradiente. Cada stop tiene dos valores: el color y su posición (en porcentaje del total del gradiente). Con solo dos stops al 0% y 100% obtienes una transición simple de un color a otro. Con stops adicionales puedes crear transiciones complejas: picos de color, bandas, efectos de arcoíris o gradientes con pauses.
¿Puedo usar transparencia (alpha) en los colores del gradiente?
Sí, mediante colores con canal alpha como rgba() o colores hex de 8 dígitos (#RRGGBBAA). El uso más común es hacer un gradiente que va de color sólido a transparente: linear-gradient(to right, #4F6EF7, transparent). Esto es muy útil para overlays, efectos de fade-out y bordes suaves sobre imágenes de fondo.
¿Cómo aplico el gradiente en CSS?
El CSS generado usa la propiedad background. Para aplicarlo en tu proyecto: 1) Copia el CSS generado. 2) Pégalo en el selector CSS del elemento donde quieres el gradiente. También puedes usar background-image en lugar de background si necesitas combinar el gradiente con otras propiedades de fondo como background-size o background-position.
¿Los gradientes CSS son compatibles con todos los navegadores?
Sí. linear-gradient y radial-gradient tienen soporte del 99%+ en todos los navegadores modernos (Chrome, Firefox, Safari, Edge). conic-gradient tiene soporte del 97%+ desde 2021. Para proyectos que necesitan soportar IE11 o navegadores muy antiguos, se puede añadir un color de fondo sólido como fallback antes de la línea del gradiente.