How can I make `backdrop-filter: blur()` effect work on iOS?

Question

I blur the background image of a container on my website, and it works on all browsers, except the browsers on iOS devices.

The CSS and HTML code is as follows:

.backblurred {
  backdrop-filter: blur(20px);
  width: 100%;
}

<div class="jumbotron top-space">
  <div class="container backblurred">
    <h3 class="text-center thin">The Raw Facts:</h3>
    <div class="row">
      <div class="col-md-3 col-sm-6 highlight">
        <div class="h-caption">
          <h4><i class="fa fa-tint fa-5"></i>Powered By Nature</h4>
        </div>
        <div class="h-body text-center">
          <p>High quality acrilic paints, made for art enthusiasts, hobbyists and whoever else feels like painting.</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 highlight">
        <div class="h-caption">
          <h4><i class="fa fa-leaf fa-5"></i>Eco-Friendly</h4>
        </div>
        <div class="h-body text-center">
          <p>Our paints are made 100% form recycled materials, including: cigarette buts, wood, seaweed and coffee.</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 highlight">
        <div class="h-caption">
          <h4><i class="fa fa-plus-square fa-5"></i>Safe To Use</h4>
        </div>
        <div class="h-body text-center">
          <p>Our paints are 100% non-toxic and safe to use in any capacity that other profesional paints are used.</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 highlight">
        <div class="h-caption">
          <h4><i class="fa fa-5a">A+</i>Premium Quality</h4>
        </div>
        <div class="h-body text-center">
          <p>Our acrylic paints provide the same quality you can expect out of any other acrylic paint, while still being safe for the environment and fun for the every-day user.</p>
        </div>
      </div>
    </div>
    <!-- /row  -->

  </div>
</div>

I researched the problem online but couldn't understand what I was doing wrong. Can anyone help?

Answer 1

The backdrop-filter CSS property is not fully supported on all iOS devices and versions.

A possible workaround is to use a transparent PNG image with a blurred background as the container's background instead of using backdrop-filter. This approach can achieve a similar effect and is more widely supported across devices and browsers.

Here's an example:

.backblurred {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.backblurred::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* replace background-image url with your image */

  /* note that if you use a local file as the image you should replace the url like: '/path/to/image'  */

  background-image: url(https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187.jpg?w=1272&h=848);
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  opacity: 0.8;
  z-index: -1;
}

<div class="backblurred">
  <h1>Hello, world!</h1>
  <p>This is some content that will appear over the blurred background.</p>
</div>