Cómo aplicar un degradado sobre una imagen: guía CSS y herramientas IA

Técnicas de diseño web para mejorar la legibilidad y el impacto visual de tus imágenes usando gradientes CSS y asistencia de IA

Por Jose Luis Rueda · 12 min lectura · 2026-07-12

¿Quieres poner texto sobre una imagen sin que se pierda? El truco está en un degradado semitransparente. Con CSS creas una capa que oscurece, ilumina o tiñe la imagen sin tocarla. Y si usas IA como HolaGPT, generas el código en segundos. Aquí tienes la guía práctica con ejemplos listos para copiar y pegar.

En desarrollo front-end, aplicar un degradado sobre una imagen se resuelve normalmente con CSS. No necesitas Photoshop ni editar el recurso cada vez. Con unas pocas líneas de código, logras superposiciones adaptables a cualquier viewport, animables y listas para producción. Además, herramientas de inteligencia artificial como HolaGPT pueden acelerar la escritura de estos fragmentos, traduciendo instrucciones en lenguaje natural a CSS válido.

Esta guía recorre las técnicas más sólidas para implementar gradientes sobre imágenes en la web. Veremos desde el uso de pseudo-elementos hasta funciones como background-blend-mode, pasando por ejemplos prácticos y consideraciones de rendimiento.

Por qué usar degradados sobre imágenes

Los gradientes superpuestos cumplen dos funciones principales: mejorar la legibilidad del contenido que se monta sobre la imagen y añadir una capa de estilo o marca. Un degradado oscuro en la parte inferior de un hero image permite que el h1 y el llamado a la acción sean legibles sin sombras de texto que resultan artificiales. De igual forma, una capa de color corporativo semitransparente unifica el tono visual de una galería de fotos sin perder la esencia de cada imagen.

Desde el punto de vista del rendimiento, los gradientes CSS son gráficos generados por el navegador. No hay descarga extra, no se incrementa el tiempo de carga de la página y se adaptan nativamente a cualquier tamaño de contenedor. Esto los convierte en la opción ideal para diseños responsivos.

Los frameworks actuales y las metodologías como BEM o utility-first ya incorporan utilidades para superposiciones. Sin embargo, comprender la mecánica CSS subyacente te da control absoluto sobre el resultado y te permite evitar dependencias innecesarias.

Fundamentos: pseudo-elementos y posicionamiento

La técnica más común consiste en usar el pseudo-elemento ::before del contenedor de la imagen. Asignamos al pseudo-elemento un posicionamiento absoluto que cubra todo el área, un gradiente de fondo y una opacidad ajustada.

Estructura HTML base:

<div class='image-overlay'>
  <img src='photo.jpg' alt=''>
  <div class='content'>
    <h2>Título aquí</h2>
  </div>
</div>

El CSS necesario:

.image-overlay {
  position: relative;
  display: inline-block; /* o bloque, según necesites */
}

.image-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  z-index: 1;
}

.image-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

.image-overlay .content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  color: white;
}

Aquí, el gradiente va de negro semitransparente en la base a completamente transparente arriba. El texto se sitúa sobre la zona oscura y gana contraste sin esfuerzo. La propiedad inset: 0 es un atajo para top:0; right:0; bottom:0; left:0 y mantiene el código conciso.

Puedes invertir la dirección (to bottom) o usar ángulos como 45deg. También es posible aplicar opacidad directamente en el gradiente mediante el cuarto valor de rgba() en lugar de usar la propiedad opacity, lo que evita que el contenido se vea afectado accidentalmente.

Tipos de gradiente y cuándo usarlos

CSS ofrece tres funciones de gradiente principales: linear-gradient(), radial-gradient() y conic-gradient(). Cada una crea superposiciones con efectos distintos.

Gradiente lineal

El más usado. Permite establecer dirección, colores y paradas de color. Para un overlay que oscurece los bordes manteniendo el centro iluminado, se puede usar:

background: linear-gradient(to right, rgba(0,0,0,0.8), transparent 50%, rgba(0,0,0,0.8));

Esto genera una viñeta lateral. Cambiar la dirección a to bottom produce el típico efecto de “scroll down” con el pie oscuro.

Si necesitas varias bandas de transparencia, añade paradas de color:

background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 100%);

Gradiente radial

Ideal para destacar el centro de la imagen o crear un foco de atención. La sintaxis básica:

background: radial-gradient(circle, transparent 30%, rgba(0,0,0,0.7) 70%);

Así, el borde se oscurece mientras el área central permanece nítida. Se puede modificar la forma (ellipse) y la posición del centro (at top left) para dirigir la mirada del usuario hacia un elemento concreto de la composición.

Gradiente cónico

Menos frecuente en overlays, pero útil para efectos de filtro de color dinámico o superposiciones angulares. La función conic-gradient() rota los colores alrededor de un punto central. Por sí solo no es la opción más práctica para mejorar legibilidad, porque tiende a crear patrones que compiten con el texto. Sin embargo, combinado con baja opacidad puede generar un sello visual de marca.

Overlay con background-blend-mode

Otra vía poderosa consiste en usar múltiples fondos en un mismo elemento aplicando la propiedad background-blend-mode. En lugar de un pseudo-elemento, colocas la imagen y el gradiente en la misma declaración de background y luego fusionas las capas con modos como multiply, overlay o screen.

Ejemplo con modo multiply:

.hero {
  background: 
    linear-gradient(to bottom, #1a1a2e, #e94560),
    url('hero.jpg') center/cover no-repeat;
  background-blend-mode: multiply;
}

El gradiente se mezcla directamente con la imagen, oscureciéndola y coloreándola en un solo paso. No necesitas opacidad ni z-index adicional. Esta técnica reduce la cantidad de elementos en el DOM y es fácil de mantener.

El modo overlay produce un contraste suave, screen aclara, y soft-light aporta un velo sutil. La elección depende del resultado visual y de la identidad de la interfaz. La combinación de background-blend-mode con gradientes lineales o radiales abre un abanico de posibilidades creativas sin afectar al rendimiento.

Un caso práctico: quieres que una galería de productos muestre imágenes con un tono unificado azul corporativo. Aplicas:

.product-card {
  background: 
    linear-gradient(135deg, rgba(0,75,150,0.4), rgba(0,75,150,0.6)),
    url('product.jpg') center/cover;
  background-blend-mode: overlay;
}

Así, cada producto hereda el aire de marca sin necesidad de procesar las fotos manualmente.

Gradientes animados y transiciones

Un gradiente overlay no tiene por qué ser estático. CSS permite animar las propiedades de los gradientes mediante @keyframes siempre que se manipulen propiedades animables, como la posición del fondo (background-position) cuando el gradiente tiene un tamaño mayor que el contenedor.

Por ejemplo, un gradiente lineal que recorre la imagen:

.animated-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

Esto produce un reflejo que barre la imagen, efecto conocido como “shimmer”. Para animar cambios de color u opacidad del gradiente en sí, es necesario recurrir a propiedades personalizadas CSS (variables) y actualizarlas con JavaScript, ya que la función gradient no es animable directamente.

También puedes crear transiciones suaves al hacer hover sobre una tarjeta. Cambias la opacidad del pseudo-elemento:

.card::before {
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card:hover::before {
  opacity: 1;
}

Al pasar el cursor, el overlay aparece gradualmente, evitando un cambio brusco y mejorando la experiencia de usuario.

Consideraciones de rendimiento y accesibilidad

Los gradientes CSS son livianos. El navegador los renderiza en la GPU y no generan peticiones de red adicionales. Sin embargo, hay que cuidar el número de capas y la complejidad de las paradas. Un gradiente con veinte paradas de color no afecta significativamente al rendimiento, pero animarlo constantemente sí puede consumir recursos. Limita las animaciones a elementos clave y utiliza will-change: background-position con moderación para avisar al motor de renderizado.

Desde la perspectiva de accesibilidad, un overlay oscuro puede ayudar a cumplir con el contraste mínimo entre texto y fondo que exige WCAG (relación 4.5:1). Pero un degradado que solo oscurece parcialmente puede dejar áreas donde el texto resulte ilegible. Verifica el contraste en los puntos donde se superpone el contenido usando herramientas como el inspector de accesibilidad de Chrome. Si el texto es blanco sobre un overlay transparente, asegúrate de que la zona más clara del degradado aún ofrezca suficiente oscuridad. Un truco es definir una capa base semitransparente sólida y luego añadir el gradiente encima con blend modes.

Además, las imágenes decorativas deben llevar alt='' para que los lectores de pantalla las ignoren. El contenido relevante siempre debe ser texto HTML, no parte de la imagen, a fin de mantener la indexación y la accesibilidad.

Cómo HolaGPT acelera la implementación de gradientes

Escribir las reglas CSS correctas puede consumir tiempo de prueba y error, sobre todo al ajustar paradas de color y modos de fusión. Una alternativa productiva es usar HolaGPT, una plataforma de IA orientada a profesionales hispanos, para generar fragmentos de código listos para producción.

Puedes darle instrucciones en lenguaje natural como: «Necesito un overlay degradado que oscurezca la parte inferior de una imagen de 800px de alto, con degradado negro a transparente, y que el texto blanco contraste bien». HolaGPT te devuelve el CSS completo, incluyendo pseudo-elementos, valores de rgba y recomendaciones de z-index. Incluso puede sugerir el HTML semántico asociado.

Esta asistencia no reemplaza el conocimiento técnico, pero sí elimina la fricción inicial. Cuando manejas múltiples variantes de diseño, HolaGPT actúa como un copiloto que acelera el prototipado. Después, solo necesitas integrar el código en tu proyecto, probar la accesibilidad y ajustar los colores corporativos.

La combinación de tus habilidades CSS y el soporte de IA te permite centrarte en las decisiones de diseño estratégicas en lugar de pelear con la sintaxis.

Ejemplo práctico completo: hero section con llamada a la acción

Vamos a construir un hero típico con imagen de fondo, overlay degradado y texto centrado. Este patrón se repite en landing pages, portfolios y sitios corporativos.

HTML:

<section class='hero'>
  <div class='hero-content'>
    <h1>Impulsa tu negocio digital</h1>
    <p>Soluciones web a medida con las últimas tecnologías.</p>
    <a href='#' class='btn'>Contáctanos</a>
  </div>
</section>

CSS:

.hero {
  position: relative;
  height: 100vh;
  background: url('hero-bg.jpg') center/cover no-repeat;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,20,0.2) 0%, rgba(0,0,20,0.8) 85%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;
  text-align: center;
  padding: 0 20px;
}

.btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 30px;
  background: #e94560;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

El degradado inicia con un azul muy oscuro casi transparente en la parte superior y se intensifica hacia abajo. Esto garantiza que el texto y el botón, situados en el centro o en el pie, mantengan un contraste excelente. La imagen original puede ser muy clara o tener zonas brillantes sin que la legibilidad se resienta.

Para adaptar el diseño a móviles, podemos reducir la altura de la sección o cambiar la dirección del gradiente. La técnica sigue siendo la misma: el pseudo-elemento se encarga de la capa óptica.

Errores comunes y cómo evitarlos

Uno de los fallos más habituales es olvidar el z-index en el contenido superpuesto. Si tu texto aparece detrás del overlay, revisa que el elemento de contenido tenga un z-index superior al del pseudo-elemento. Otra confusión es aplicar el gradiente directamente sobre el contenedor principal sin posicionamiento relativo, lo que provoca que el pseudo-elemento se posicione respecto al ancestro posicionado más cercano. Asegúrate de que el position: relative esté en el contenedor inmediato.

Algunos desarrolladores intentan aplicar el gradiente a la propia imagen usando background-image y background en el mismo selector de img. Pero los elementos img no admiten pseudo-elementos. La solución siempre pasa por envolver la imagen en un div o usar background múltiple en un contenedor genérico.

Otro error es descuidar la compatibilidad con navegadores antiguos. Las funciones linear-gradient y radial-gradient tienen soporte casi universal, pero conic-gradient y background-blend-mode podrían fallar en Internet Explorer. Si tu audiencia incluye esos entornos, provee un fallback con un color sólido semi-transparente en el pseudo-elemento.

Personalización avanzada con variables CSS

Para sistemas de diseño escalables, define los gradientes mediante variables CSS. Así puedes cambiar la marca completa sin reescribir reglas.

:root {
  --brand-gradient: linear-gradient(to right, #667eea, #764ba2);
  --overlay-opacity: 0.65;
}

.overlay::before {
  background: var(--brand-gradient);
  opacity: var(--overlay-opacity);
}

Incluso es posible combinar variables con blend modes para crear temas claros y oscuros:

[data-theme='dark'] .overlay::before {
  background: linear-gradient(to top, #000, transparent);
  background-blend-mode: multiply;
}

Este enfoque reduce el código duplicado y centraliza los ajustes visuales. En proyectos grandes que utilizan preprocesadores como Sass, los mixins para gradientes siguen la misma filosofía.

La tendencia actual es combinar estas capacidades con la asistencia de IA para generar rápidamente variantes. Puedes pedir a HolaGPT: «Crea tres versiones de un overlay degradado con variables CSS para modo claro, oscuro y alto contraste». Obtendrás una base sólida que luego adaptas.