Los 3 tipos de gradiente CSS — Cuándo usar cada uno
CSS ofrece tres funciones nativas para crear gradientes, cada una con un comportamiento visual distinto y casos de uso específicos:
| Función | Dirección | Ideal para | Soporte |
|---|---|---|---|
linear-gradient() | Línea recta en cualquier ángulo | Fondos, botones, overlays, banners | Todos los navegadores |
radial-gradient() | Circular o elíptico desde un centro | Efectos de luz, fondos orgánicos, halos | Todos los navegadores |
conic-gradient() | Angular alrededor de un punto | Gráficos de tarta, ruedas de color, patrones | 92%+ navegadores modernos |
repeating-linear-gradient() | Patrón lineal repetido | Rayas, patrones decorativos, texturas | Todos los navegadores |
Sintaxis de gradientes CSS — Referencia rápida
linear-gradient
radial-gradient
conic-gradient
Trucos y técnicas avanzadas con gradientes CSS
Gradiente como fondo de texto
Para aplicar un gradiente al texto en lugar de al fondo del elemento, necesitas tres propiedades: el gradiente en background, -webkit-background-clip: text y color: transparent. Funciona bien en titulares y elementos grandes.
Animar gradientes con CSS
Los gradientes no son directamente animables con transition. La técnica estándar es usar background-size: 200% 200% y animar background-position con @keyframes para crear el efecto de gradiente en movimiento.
Overlay sobre imágenes
Usar linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)) como overlay semi-transparente sobre imágenes es una técnica muy usada en tarjetas, hero sections y thumbnails para mejorar la legibilidad del texto.
| Técnica | Propiedad clave | Caso de uso |
|---|---|---|
| Gradiente en texto | background-clip: text | Titulares llamativos |
| Gradiente animado | background-size + background-position | Botones, fondos dinámicos |
| Overlay sobre imagen | rgba() transparente | Cards, hero sections |
| Borde con gradiente | border-image con gradient | Inputs, cards destacadas |
| Rayas con gradiente | repeating-linear-gradient | Patrones, texturas decorativas |
Preguntas frecuentes sobre gradientes CSS
linear-gradient crea una transición de color a lo largo de una línea recta en la dirección que especifiques: de arriba a abajo (180deg por defecto), de izquierda a derecha (90deg) o en cualquier ángulo. radial-gradient crea una transición que irradia desde un punto central hacia fuera en forma circular o elíptica. Ambas funciones admiten múltiples paradas de color y posiciones personalizadas. La sintaxis básica es: background: linear-gradient(180deg, #color1, #color2) o background: radial-gradient(circle, #color1, #color2). Verifica la especificación completa en MDN Web Docs (developer.mozilla.org/en-US/docs/Web/CSS/gradient).
Puedes añadir tantas paradas de color como quieras separándolas por comas dentro de la función de gradiente. Opcionalmente, puedes indicar la posición de cada parada en porcentaje o píxeles. Por ejemplo: background: linear-gradient(135deg, #ff6b6b 0%, #feca57 35%, #48dbfb 70%, #ff9ff3 100%). Si no especificas posiciones, CSS las distribuye uniformemente. También puedes usar paradas de color con transparencia usando rgba() o colores con canal alpha. Verifica la sintaxis actualizada en la especificación CSS Images Level 4 en el W3C (w3.org/TR/css-images-4).
conic-gradient crea una transición de color que gira alrededor de un punto central, como los sectores de un gráfico de tarta. A diferencia de radial-gradient que irradia desde el centro, conic-gradient distribuye los colores en ángulos. Es ideal para crear gráficos de tarta en CSS puro, efectos de rueda de color, fondos angulares y patrones decorativos. La sintaxis es: background: conic-gradient(from 0deg, #color1, #color2, #color3). Para crear un gráfico de tarta con segmentos exactos, especifica paradas repetidas: conic-gradient(red 0deg 90deg, blue 90deg 180deg). Verifica el soporte actual en Can I Use (caniuse.com/css-conic-gradients).
Para añadir transparencia en un gradiente CSS usa colores en formato rgba() o con notación hexadecimal de 8 dígitos. Por ejemplo: background: linear-gradient(to bottom, rgba(29,158,117,1), rgba(29,158,117,0)) crea un gradiente que va de verde sólido a verde completamente transparente. También puedes usar la palabra clave transparent directamente: linear-gradient(to bottom, #1D9E75, transparent). Los gradientes con transparencia son muy usados para overlays sobre imágenes o vídeos, creando el efecto de difuminado. Verifica la especificación de color CSS en MDN Web Docs (developer.mozilla.org/es/docs/Web/CSS/color_value).
Los gradientes CSS no son directamente animables con transition porque no son un valor numérico simple. La técnica más eficiente es animar background-position con background-size aumentado. Por ejemplo: background: linear-gradient(135deg, #color1, #color2); background-size: 200% 200%; animation: gradientMove 3s ease infinite; y en keyframes: @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }. Otra técnica usa pseudo-elementos con opacity transition para hacer fade entre dos gradientes. Verifica ejemplos en recursos de animación CSS como Animate.style o CSS-Tricks.
conic-gradient tiene soporte amplio en todos los navegadores modernos: Chrome desde la versión 69, Edge desde la 79, Firefox desde la 83, Safari desde la 12.1 y Opera desde la 56. La cobertura global supera el 92% de los navegadores en uso. Para navegadores más antiguos puedes usar @supports para proporcionar un fallback con background-color o una imagen PNG. La sintaxis con prefijo -webkit- ya no es necesaria. Verifica el soporte exacto y actualizado en Can I Use (caniuse.com/css-conic-gradients) antes de usarlo en proyectos que requieran compatibilidad con IE o navegadores muy antiguos.
Para aplicar un gradiente como relleno de texto en CSS necesitas tres propiedades: background con el gradiente, -webkit-background-clip: text (o background-clip: text en navegadores modernos) y color: transparent para que el fondo del gradiente sea visible a través del texto. El código completo es: .texto { background: linear-gradient(90deg, #1D9E75, #0F6E56); -webkit-background-clip: text; background-clip: text; color: transparent; }. Esta técnica funciona bien en títulos y elementos de texto grande. Para elementos de texto pequeño puede perder nitidez en algunas pantallas. Verifica la compatibilidad con background-clip: text en Can I Use (caniuse.com/background-clip-text).
Gradiente y degradado son términos equivalentes en español — ambos describen una transición suave entre dos o más colores. En inglés se usa gradient. En diseño gráfico el término más técnico es gradiente, mientras que degradado es más coloquial. La diferencia importante es entre los tipos: gradiente lineal (transición en línea recta), gradiente radial (transición circular desde un centro), gradiente cónico (transición angular alrededor de un punto) y gradiente de malla (mesh gradient, transición multidireccional compleja). En CSS las funciones son linear-gradient, radial-gradient y conic-gradient. Los mesh gradients no tienen implementación nativa en CSS y requieren SVG o soluciones con múltiples capas.