Añade un gradiente a tus imágenes con CSS.

Algunas veces necesitaremos agregar un gradiente a nuestras imágenes ya sea a modo de efecto (con un hover) o simplemente porque queremos añadir un texto encima de la imagen.

Agregar este efecto que comienza con un tono oscuro y que posteriormente se vaya degradando, nos ayudaría contrastar el texto.

Para lograr esto, primero tendremos que tener nuestra imagen dentro de un contenedor ya sea con una etiqueta div o figure como se muestra a continuación:

HTML

<div class="container-image">
      <img src="" alt=""/>
</div>

Para el código CSS, podemos hacer las modificaciones que queramos desde cambiar el color de fondo, la dirección del degradado o incluso agregar más colores.

CSS

.container-image {
  width: 100%;
  position: relative;
}

.container-image img {
  width: 100%;
}

.container-image::after {
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to top, #22577a, transparent);
}

Puedes ver el código en función en Codesandbox o en Codepen.

Si te gustó el post o tienes algún comentario, cuéntame en Twitter. 😀