Image with text overlay

Displaying text on top of images, while very common, is fairly tricky to get right. This is mainly because the text needs to be readable regardless of the background image and color. Luckily, creating text overlays is easy with CSS.

Using backdrop-filter

The most modern technique to create a text overlay is by using the backdrop-filter property. This property applies a filter to the backdrop of an element, which is the area behind the element itself.

For an overlay effect, you can use the blur() and brightness() functions, which apply a blur and adjust the brightness of the backdrop respectively.

<figure>
  <figcaption>Text</figcaption>
  <img src="/path/to/img.jpg">
</figure>

figure {
  position: relative;
}

figcaption {
  position: absolute;
  color: #fff;
  backdrop-filter: blur(14px) brightness(75%);
}

Using linear-gradient

A more traditional way to achieve a similar effect is by using a linear-gradient() background. This method is less flexible than backdrop-filter, but it works well in most cases.

Depending on your needs, you can adjust the gradient's colors, direction, and opacity to create different overlay effects.

<figure>
  <img src="/path/to/img.jpg">
  <figcaption>Text</figcaption>
</figure>

figure {
  position: relative;
}

figcaption {
  position: absolute;
  color: #fff;
  background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
}