Fondos con degradados CSS

¿Qué es un fondo degradado CSS?

Un fondo degradado en CSS es una imagen generada mediante funciones nativas de CSS, sin necesidad de un archivo de imagen externo.

Los gradientes se asignan a la propiedad background-image, no a background-color. El navegador los representa interpolando valores de color a través de un eje, forma o ángulo definido, produciendo una transición de color suave completamente en código.

Debido a que el navegador genera el degradado en el momento de pintar, no se realiza ninguna solicitud HTTP, a diferencia de los fondos rasterizados donde el navegador debe buscar un archivo separado antes de que se pueda completar el renderizado.

CSS los gradientes no tienen dimensiones intrínsecas. Se escalan para llenar el elemento al que se aplican, lo que los hace naturalmente fluidos dentro de los diseños diseño responsivo (EN).

Stripe es un ejemplo bien conocido de este enfoque en producción. Las secciones principales de la compañía utilizan llamadas linear-gradient() en capas en contenedores grandes, evitando por completo las solicitudes de imágenes externas y manteniendo una representación nítida en todas las densidades de pantalla.

---

¿Cuáles son los tipos de gradientes CSS?

CSS proporciona 4 funciones de gradiente nativas: linear-gradient(), radial-gradient(), conic-gradient() y variantes repetidas de cada una.

Cada tipo utiliza un modelo geométrico diferente para distribuir los colores. Elegir el tipo incorrecto para un contexto de diseño produce artefactos visuales o fusiones no deseadas que no se pueden corregir únicamente con ajustes de parada de color.

CSS los gradientes cónicos tienen una puntuación de 92/100 de compatibilidad entre navegadores según los datos de LambdaTest, con soporte completo en Chrome, Firefox, Safari 12.1+ y Edge 79+. IE 11 no tiene soporte para conic-gradient().

Degradado lineal

Distribución de color basada en ejes:

linear-gradient() transiciones de colores a lo largo de una línea recta en un ángulo o dirección definidos.

• La dirección predeterminada es to bottom (180 grados) cuando no se proporciona ningún argumento de dirección

• Acepta unidades de ángulo deg, turn y rad además de direcciones de palabras clave como to right

• Las paradas duras creadas al colocar 2 paradas en la misma posición producen un Edge afilado sin mezcla

gradiente radial

radial-gradient() irradia color hacia afuera desde un punto central.

La forma y el tamaño se pueden configurar de forma independiente:

• circle mantiene radios iguales en ambos ejes; ellipse escala a las dimensiones del elemento (predeterminado)

• Palabras clave de tamaño: closest-side, farthest-side, closest-corner, farthest-corner

• La posición central usa la misma sintaxis que background-position

Degradado cónico

Los colores se desplazan alrededor de un punto central en ángulos definidos en lugar de a través de un eje.

conic-gradient() fue el último de los 4 tipos en lograr compatibilidad total con el navegador, llegando a Chrome 69, Firefox 83 y Safari 12.1. Acepta valores de ángulo en unidades deg, turn y grad en cada parada de color, a diferencia de las paradas basadas en porcentajes utilizadas en las variantes lineales y radiales.

Los gráficos circulares y las ruedas de color son los dos casos de uso más comunes, y ambos se pueden lograr sin JavaScript o SVG.

Degradados repetidos

Comportamiento de mosaico es la diferencia clave con las funciones de gradiente estándar.

Las variantes repetidas (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()) colocan en mosaico el patrón definido en todo el elemento en lugar de estirar una sola instancia de degradado para llenarlo.

Intervalos de repetición muy pequeños, por ejemplo un repeating-linear-gradient establecido en intervalos de 2px, pueden producir artefactos de alias en pantallas con un nivel alto de DPI. Las pruebas en dispositivos físicos o el uso de la emulación de dispositivos Chrome DevTools los detectan antes de la producción.

---

¿Cómo funciona la sintaxis de degradado lineal CSS?

La sintaxis linear-gradient() sigue una estructura consistente de 3 partes: una dirección opcional, al menos 2 paradas de color y valores de posición opcionales para cada parada.

Sintaxis completa: linear-gradient([direction], color-stop-1, color-stop-2, ...)

Valores de dirección y ángulo

La dirección acepta 2 formatos:

• Direcciones de palabras clave: to right, to bottom, to top left y combinaciones de brújula similares

• Ángulos explícitos: 45deg, 0.5turn, 1.57rad

Cuando no se especifica ninguna dirección, el navegador utiliza de forma predeterminada to bottom (equivalente a 180deg). Un valor de 0deg apunta hacia arriba y los valores en grados aumentan en el sentido de las agujas del reloj, lo cual es lo opuesto a la convención trigonométrica estándar. Vale la pena saberlo antes de pasar 10 minutos preguntándose por qué 90deg no señala.

Sintaxis de los puntos de color

Las paradas de color siguen el patrón color position, por ejemplo red 25% o #3a86ff 100px.

• Unidades de posición: porcentajes, píxeles, em o rem

• Las paradas sin posición se distribuyen uniformemente entre la parada definida anterior y la siguiente

• 2 paradas en la misma posición (por ejemplo, red 50%, blue 50%) producen un Edge duro sin fusión gradual

Indicaciones de color

Una indicación de color desplaza el punto medio de la transición entre dos puntos de color.

La sintaxis coloca un valor de posición independiente entre 2 paradas: red, 20%, blue. Esto le indica al navegador que alcance el punto medio de la combinación de rojo y azul en la marca del 20% en lugar de la marca predeterminada del 50%. Útil para hacer que un degradado parezca "tirar" hacia un lado sin ajustar las posiciones de parada.

---

¿Cómo funciona la sintaxis de gradiente radial CSS?

radial-gradient() genera color que se extiende hacia afuera desde un punto central, con forma y tamaño configurables de forma independiente.

Sintaxis completa: radial-gradient([shape] [size] at [position], color-stop-1, color-stop-2, ...)

Parámetros de forma y tamaño

El comportamiento de elipse versus círculo difiere en elementos que no son cuadrados:

Un degradado ellipse se extiende para coincidir con las proporciones de ancho y alto del elemento. Un degradado circle mantiene radios iguales en ambos ejes independientemente de las dimensiones del elemento, lo que significa que la forma circular aparecerá descentrada si el elemento no es cuadrado.

Palabras clave de tamaño en la práctica

farthest-corner es el valor predeterminado y produce un degradado que se extiende hasta llegar a la esquina más distante del elemento, llenando el fondo por completo.

closest-side detiene el gradiente en el Edge más cercano. Esto crea un Edge duro visible en los lados lejanos del elemento, lo cual es una elección de diseño deliberada y no un error de representación. Cada palabra clave de tamaño produce un resultado visualmente distinto en el mismo elemento; no son variaciones estilísticas del mismo resultado.

---

¿Cómo funciona la sintaxis de gradiente cónico CSS?

conic-gradient() distribuye colores angularmente alrededor de un punto central, barriendo la forma en que se mueven las manecillas en la esfera de un reloj.

Sintaxis completa: conic-gradient([from angle] [at position], color-stop-1, color-stop-2, ...)

El ángulo inicial predeterminado es 0deg (parte superior del elemento). El centro predeterminado es 50% 50%. Ambos se pueden cambiar de forma independiente.

Paradas de color basadas en ángulos

Las paradas de color en conic-gradient() aceptan valores de ángulo además de porcentajes.

• conic-gradient(red 0deg, blue 180deg, red 360deg) produce un barrido mitad rojo, mitad azul

• conic-gradient(red 0%, blue 50%, red 100%) produce el mismo resultado usando porcentajes

• Es válido mezclar unidades angulares y porcentajes en una misma declaración.

Producción de gráficos circulares:

Un gráfico circular de 3 segmentos no requiere JavaScript. La sintaxis conic-gradient(red 120deg, blue 240deg, green 360deg) divide el círculo en 3 sectores iguales. Agregar border-radius: 50% al elemento lo redondea hasta formar un círculo.

Control de posición

La palabra clave at establece el punto central del barrido, utilizando la misma sintaxis de posición que radial-gradient() y background-position.

Mover el centro 50% 50% crea distribuciones angulares asimétricas. Un degradado cónico con at 0 0 coloca el centro en la esquina superior izquierda del elemento, produciendo un barrido de un cuarto de círculo a lo largo de la superficie del elemento. Útil para efectos de brillo en las esquinas en diseños de tarjetas.

---

¿Qué son las CSS paradas de color degradado y cómo funcionan?

Una parada de color define dónde aparece un color específico dentro del degradado y cómo el navegador interpola con las paradas vecinas.

Sintaxis de parada de color: color position, por ejemplo, #3a86ff 25% o rgba(0,0,0,0.5) 100px.

Posición y distribución de los puntos de color

3 comportamientos controlan la colocación de paradas:

• Las paradas con posiciones explícitas se representan exactamente en ese punto del gradiente.

• Las paradas sin posiciones se distribuyen automáticamente de manera uniforme entre las paradas definidas anteriores y siguientes

• 2 topes colocados en posiciones idénticas crean un Edge duro sin transición gradual entre ellos

Apilar 3 o más paradas en secuencia produce gradientes multibanda. El patrón de fondo repeating-linear-gradient(45deg, #eee 0px, #eee 10px, white 10px, white 20px) crea un efecto de rayas usando 4 paradas sin ningún CSS adicional. CSS patrones de fondo (EN) creados de esta manera no requieren recursos de imagen y se reproducen nítidamente en todas las resoluciones.

Interpolación de colores

De forma predeterminada, los navegadores interpolan entre paradas en el espacio de color sRGB, lo que puede producir tonos medios borrosos en las transiciones entre tonos opuestos (por ejemplo, del rojo al azul que pasa a través de una zona gris-púrpura desaturada).

La sintaxis color-mix() y la función color() más nuevas amplían las opciones de interpolación, incluido el espacio de color oklch, que produce gradientes perceptualmente uniformes sin artefactos de desaturación. La compatibilidad del navegador con la interpolación oklch en gradientes se sitúa en alrededor del 88 % según los datos del estado de CSS 2024.

Sugerencias de color (control de punto medio)

Una indicación de color es un valor que especifica únicamente una posición entre dos puntos de color y desplaza el punto medio de la mezcla.

Sintaxis: red, 30%, blue: el valor 30% es la pista, no una parada de color. El navegador alcanza el punto medio de la transición de rojo a azul en la marca del 30% en lugar del 50% predeterminado. Esta aceleración asimétrica hacia un lado es una herramienta sutil. La mayoría de los desarrolladores lo pasan por alto porque parece idéntico a un valor de posición hasta que comprendes lo que hace.

---

¿Cómo se superponen varios degradados CSS en un elemento?

Múltiples gradientes CSS se acumulan como valores separados por comas en una única declaración background-image.

background-image: linear-gradient(...), radial-gradient(...), url('image.jpg');

El primer valor declarado se muestra en la parte superior, el último se muestra en la parte inferior. Este orden de apilamiento es lo opuesto al comportamiento z-index, que hace tropezar a las personas la primera vez.

Requisitos de transparencia

Las capas inferiores solo se muestran a través de las capas superiores si las capas superiores contienen transparencia.

• La palabra clave transparent se resuelve en rgba(0,0,0,0): negro completamente transparente

• Los valores rgba() y hsla() con alfa menor que 1 producen transparencia parcial

• Un linear-gradient(black, black) en la parte superior bloquea todo lo que está debajo, independientemente de cuántas capas se declaren debajo

Un patrón de producción común: background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg') superpone una tela oscura semitransparente sobre una fotografía, creando un contraste de texto confiable sin modificar el archivo de imagen. Según el análisis 2024 Million de WebAIM, el contraste de color deficiente afecta al 83.6 % de los sitios web: esta técnica de superposición de degradados en capas aborda directamente la causa más común de ese fallo en secciones con muchas imágenes.

Control de propiedades por capa

background-size, background-position y background-repeat aceptan valores separados por comas que se asignan a cada capa en orden.

background-image: linear-gradient(...), url('texture.png');
background-size: cover, 200px 200px;
background-position: center, top left;

El cover se aplica a la capa de degradado; 200px 200px se aplica a la textura. Este control por capa hace que los CSS fondos animados (EN) complejos y los sistemas de superposición en capas sean manejables sin duplicar selectores ni agregar elementos envolventes.

Combinando degradados con imágenes

Los degradados y las referencias de imágenes url() pueden coexistir en la misma declaración background-image.

Las capas de degradado se generan en el navegador en el momento de la pintura, por lo que combinarlas con una referencia de imagen no aumenta el recuento de solicitudes HTTP más allá de la captura de una sola imagen. Las propias capas de gradiente siguen siendo de solicitud cero.

¿Cómo afectan los gradientes CSS al rendimiento?

CSS los degradados se generan en el navegador al momento de pintar. Producen cero solicitudes HTTP, a diferencia de las imágenes de fondo rasterizadas que requieren un recorrido completo de ida y vuelta por la red antes de que el navegador pueda procesarlas.

Dicho esto, los gradientes no son gratuitos. El costo aparece en la etapa de renderizado, no en la etapa de red.

Costo de repintado durante la animación

La animación directa de las propiedades del degradado (valores de color, ángulos, posiciones de parada) activa un repintado completo en cada fotograma.

A 60 cuadros por segundo, ese repintado se ejecuta continuamente. En degradados complejos con muchas paradas de color o grandes dimensiones de elementos, cada repintado consume un tiempo de CPU medible.

El enfoque correcto para fondos degradados animados:

• Anima background-position en un degradado con background-size: 400% 400% en lugar de animar los colores directamente

• Usa opacity o transform en un pseudoelemento superpuesto sobre un gradiente estático

• Evita will-change: background-image: no crea una capa de composición y no proporciona ningún beneficio de rendimiento.

Degradados complejos y costo de renderizado

Cada parada de color adicional aumenta la carga de cálculo de píxeles durante la pintura.

Un degradado de 3 paradas se renderiza notablemente más rápido que un degradado de 10 paradas en el mismo elemento grande. En celulares con memoria GPU limitada, la repetición de gradientes en intervalos muy pequeños (2-4px) puede producir artefactos de aliasing y un tiempo de pintura elevado. Las pruebas en dispositivos Android físicos de gama baja detectan estos problemas antes de la producción.

will-change: transform en un pseudoelemento, no en el degradado en sí, promueve esa capa a un compuesto sin forzar el recálculo del degradado en cada cuadro.

---

¿Cómo se utilizan los degradados CSS en el diseño adaptable?

CSS los gradientes escalan con su contenedor de forma predeterminada. No se requiere ninguna solución background-size: cover, a diferencia de las imágenes rasterizadas donde el navegador debe estirar o recortar una cuadrícula de píxeles finita.

Los sitios web responsivos obtienen una tasa de conversión 11% más alta que los equivalentes no responsivos, según datos de VWO. Los fondos degradados que se adaptan con fluidez a los cambios de diseño son parte de esa ventaja del diseño móvil (EN) sobre las alternativas de imágenes estáticas.

Porcentaje frente a posiciones de parada de píxeles

Cómo se comportan las paradas en diferentes tamaños de pantalla:

• Porcentaje de paradas escala con las dimensiones renderizadas del elemento en cada punto de interrupción

• Las paradas de píxeles permanecen fijas independientemente de cuán grande o pequeño sea el contenedor

• Mezclar ambas unidades en un degradado es válido y, a veces, útil: las paradas bruscas basadas en píxeles pueden anclar una banda, mientras que las paradas porcentuales manejan las mezclas circundantes.

Un degradado con paradas bruscas en 50px y calc(100% - 50px) mantiene una banda de ancho fijo en el centro de un elemento independientemente del ancho total del elemento. Ese comportamiento es imposible con paradas de sólo porcentaje.

Consultas de medios y dirección del gradiente

Consultas de medios (EN) pueden cambiar la dirección del degradado, la paleta de colores o el ángulo en puntos de interrupción específicos sin ningún recurso de imagen adicional.

.hero {
  background-image: linear-gradient(to right, #3a86ff, #8338ec);
}

@media (max-width: 768px) {
  .hero {
    background-image: linear-gradient(to bottom, #3a86ff, #8338ec);
  }
}

El degradado horizontal en el escritorio se vuelve vertical en el móvil. Sin intercambio de imágenes, sin solicitud HTTP adicional.

Superposiciones de degradado en imágenes responsivas

Apilar un degradado semitransparente sobre una foto requiere background-size: cover tanto en la capa de degradado como en la capa de imagen.

Sin hacer coincidir los valores background-size por capa, la imagen se escala para llenar el contenedor, pero la capa de degradado no, lo que rompe la alineación visual entre la superposición y la foto. Cada valor background-size, background-position y background-repeat se asigna a su capa correspondiente en el orden de declaración background-image.

---

¿Cuáles son las consideraciones de accesibilidad del gradiente CSS?

El contraste de color deficiente es la falla de accesibilidad número uno en la web y afecta al 83.6% de todos los sitios web según el análisis 2024 Million de WebAIM. Los degradados son una causa recurrente porque la relación de contraste cambia continuamente a lo largo de la superficie del degradado.

WCAG 2.1 SC 1.4.3 requiere una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande (18px+ regular o 14px+ negrita). Con un fondo sólido, una única comprobación de contraste recorre todo el elemento. Con un fondo degradado, cada punto a lo largo del degradado es un fallo potencial.

Prueba de contraste en fondos degradados

Las herramientas automatizadas detectan aproximadamente el 95% de los problemas de contraste, pero el 5% restante relacionado con fondos degradados y de imágenes requiere verificación manual (web-accessibility-checker.com (EN), 2024).

Enfoque de prueba para fondos degradados:

• Identificar el color de fondo más claro en el rango de degradado

• Ejecute la verificación de contraste entre ese color y el color del texto.

• Si el texto pasa por el punto más claro, pasa por todos los puntos.

Herramientas que admiten esto: TPGi Color Contrast Analyzer (CCA) toma muestras de los píxeles en pantalla directamente, incluidas las superficies de degradado. Stark en Figma comprueba el contraste durante la fase mockup (EN) antes de escribir cualquier CSS.

Degradados animados y sensibilidad al movimiento

Los trastornos vestibulares afectan a más de 70 millones de personas en todo el mundo, lo que hace que los fondos animados sean una verdadera barrera en lugar de un inconveniente menor (CSS-Trucos).

Los fondos degradados animados deben respetar la consulta de medios prefers-reduced-motion. Todos los navegadores principales (Chrome, Edge, Firefox, Safari y Opera) admiten esta función.

@media (prefers-reduced-motion: no-preference) {
  .animated-bg {
    animation: gradientShift 6s ease infinite;
  }
}

La animación solo se ejecuta cuando el usuario no ha solicitado un movimiento reducido. Las animaciones de degradado decorativas sin valor informativo deben eliminarse por completo bajo esta consulta, no ralentizarse.

Significado de solo color

Los degradados que cambian de rojo a verde para indicar el estado (bajo a alto, malo a bueno) fallan a los usuarios con deficiencias en la visión del color.

No confíes únicamente en el color degradado para comunicar significado. Empareje el degradado con una etiqueta de texto, un icono o un valor numérico. Esto se aplica a los componentes de la CSS barra de progreso (EN), mapas de calor y cualquier fondo que codifique datos a través de una transición de color.

---

¿Cómo funcionan los gradientes CSS en entornos de varios navegadores?

Los 4 tipos de degradado CSS tienen soporte completo en Chrome 69+, Firefox 83+, Edge 79+ y Safari 12.1+. El prefijo -webkit- ya no es necesario para linear-gradient() o radial-gradient() en ningún navegador mantenido actualmente.

Más del 30% de los problemas de renderizado de gradientes surgen en Safari e Internet Explorer, y los gradientes cónicos producen el doble de tasa de falla en comparación con los tipos lineales y radiales (Bomberbot).

Matriz de compatibilidad del navegador actual

IE 11 no admite conic-gradient(). Para aproximadamente el 0.3-0.5% de los usuarios que todavía utilizan IE 11 (StatCounter 2024), un respaldo @supports evita un diseño roto.

Estrategia alternativa con @supports

@supports prueba el soporte conic-gradient() y ofrece un respaldo linear-gradient() para entornos donde falla la representación cónica.

.element {
  background-image: linear-gradient(135deg, #3a86ff, #8338ec);
}

@supports (background: conic-gradient(red, blue)) {
  .element {
    background-image: conic-gradient(from 45deg, #3a86ff, #8338ec);
  }
}

El degradado lineal se representa en todas partes. El degradado cónico lo reemplaza sólo en los navegadores que lo admiten. No JavaScript, sin rastreo de agente de usuario.

Notas de renderizado específicas de Safari

Safari tenía un error documentado con la representación de elipses radial-gradient() antes de la versión 14.1.

El error afectó la escala de elipse dentro de contenedores flexibles, produciendo un degradado circular en elementos donde se especificó una elipse. Las pruebas en Safari 14.0 y versiones anteriores con gradientes radiales dentro de los padres display: flex o display: grid detectan esto antes del envío. El flujo de trabajo de prueba de compatibilidad entre navegadores (EN) debe incluir dispositivos iOS físicos, ya que Safari en iOS sigue el mismo motor de renderizado que Safari de escritorio y hereda los mismos errores específicos de la versión.

Preguntas frecuentes: Fondos con degradados CSS

¿Cuál es la diferencia entre gradiente lineal y gradiente radial en CSS?

linear-gradient() distribuye el color a lo largo de un eje recto en un ángulo definido.

radial-gradient() extiende el color hacia afuera desde un punto central en forma circular o elíptica.

La geometría es la principal diferencia. Usa lineal para fondos direccionales, radial para efectos de foco o brillo.

¿Can I Use un degradado CSS como color de fondo?

No. Los degradados CSS son valores de imagen y solo funcionan en background-image, no en background-color.

Establecer background-color en una función de gradiente no produce resultados. La propiedad no acepta tipos de datos <image>.

¿Cómo agrego transparencia a un degradado CSS?

Usa valores de color rgba() o hsla() con un alfa inferior a 1, o la palabra clave transparent.

Por ejemplo, linear-gradient(rgba(0,0,0,0.5), transparent) crea una superposición semiopaca que se desvanece. Este es el enfoque estándar para el contraste de texto sobre imágenes destacadas.

¿Cómo animo un fondo degradado CSS?

La animación directa de los valores de color del degradado activa un repintado completo de cada cuadro, lo cual es costoso.

El mejor enfoque: animar background-position en un degradado con background-size: 400% 400%. Esto mueve el gradiente sin recalcularlo, manteniendo baja la carga de la GPU.

¿Por qué mi degradado se ve turbio o gris en el medio?

Se trata de un problema de interpolación de color en el espacio de color sRGB predeterminado.

Las transiciones entre tonos opuestos (del rojo al azul, por ejemplo) pasan por una zona media desaturada. Cambiar a la interpolación oklch usando la función color() produce una mezcla perceptualmente más limpia.

¿Cómo coloco múltiples degradados en un elemento?

Enumérelos como valores separados por comas en background-image.

El primer valor se muestra en la parte superior. Las capas inferiores necesitan topes transparentes o semitransparentes para permanecer visibles. Haz coincidir los valores background-size y background-position por capa para mantener la alineación consistente.

¿Cómo hago un efecto de texto degradado CSS?

Aplique el degradado a background-image, luego establezca background-clip: text y color: transparent en el mismo elemento.

La forma del texto recorta el degradado, haciendo que el color sea visible sólo a través de las formas de las letras. La compatibilidad con navegadores es completa en todos los navegadores modernos sin prefijos.

¿Los gradientes CSS funcionan en todos los navegadores?

Los degradados lineales y radiales son totalmente compatibles con todos los navegadores mantenidos. El prefijo -webkit- ya no es necesario.

conic-gradient() no tiene soporte en IE 11. Usa @supports para proporcionar un respaldo de gradiente lineal para entornos donde falla la representación cónica.

¿Cómo hago un fondo degradado CSS de página completa?

Aplique el degradado al elemento body con min-height: 100vh.

body {
  background-image: linear-gradient(135deg, #3a86ff, #8338ec);
  min-height: 100vh;
}

Esto cubre la ventana gráfica completa independientemente de la altura del contenido.

¿Cómo me aseguro de que un fondo degradado cumpla con los requisitos de contraste de accesibilidad?

WCAG 2.1 requiere una relación de contraste de 4.5:1 para texto normal. Con los degradados, pruebe con el color de fondo más claro del rango, no con un promedio.

Si el texto falla en el punto más claro, agregue una superposición semiopaca o mueva el texto a un contenedor de color sólido.