Tres tipos de degradados CSS y cuándo usar cada uno
Los degradados lineales (`linear-gradient()`) hacen la transición de colores a lo largo de una línea recta en cualquier ángulo — la opción más común para fondos, botones y rellenos de texto. Los degradados radiales (`radial-gradient()`) emanan desde un punto central hacia afuera, produciendo dispersiones de color circulares o elípticas ideales para efectos de foco y fondos hero. Los degradados cónicos (`conic-gradient()`) rotan los colores alrededor de un punto central, permitiendo gráficos circulares y ruedas de color completamente en CSS.
Los tres son CSS puro — sin imágenes, sin SVG, sin JavaScript. Escalan perfectamente a cualquier resolución y se cargan instantáneamente.
Paradas de color, posiciones y transparencia
Un degradado se define por al menos dos paradas de color. Cada parada especifica un color y una posición opcional (0%–100%). Puedes usar cualquier color CSS válido — hex, rgb(), hsl(), oklch() o colores nombrados. La transparencia alfa (rgba, hsla o hex con alfa) funciona completamente.
Las paradas de color duras — dos paradas en la misma posición — crean bordes de color nítidos sin mezcla. Esta técnica permite patrones de tablero de ajedrez y fondos rayados completamente en CSS.
Soporte de navegadores y prefijos de proveedor
Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan `linear-gradient()`, `radial-gradient()` y `conic-gradient()` sin prefijo. Los degradados cónicos tienen soporte completo desde 2020. Si necesitas soporte para IE11, necesitarás un color de fondo sólido como fallback.