CSS - filter style property only on background image

In this short article, we would like to show how to set filter style property only on background image using CSS.

In middle of 2024 year there is not available way to set filter style on background image so there is needed some trick. The most common way is to create a separated element inside a main element that has own background with set filter.

Practical example

In this section we use a separated element inside to set background image with filter style. To make the separated element neutral we use position: absolute with negative z-index.

// ONLINE-RUNNER:browser;

<style>

  div.element {
      position: relative;
      width: 225px;
      height: 225px;
  }

  div.background {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: url('https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png') 0 0 / auto;
      filter: blur(5px);  /* <----- filter style property       */
      z-index: -1;
  }
  
</style>
<div class="element">
  <div class="background"></div>
  Some content here ...
</div>

Warning: in some cases z-index: -1 should be removed.