Why does CSS "blur" backdrop-filter not work in Chrome?

user_9978167 0
Viewed 649

In CSS, I use the backdrop-filter property to blur the background of the sticky header.

Therefore, I used backdrop-filer:blur(10px) and set opacity:50%.

If you run the code, the sticky header background will not blur. Can you tell me why the sample code doesn't work?

.sticky{
    background-color:orangered;
    opacity: 50%;
    backdrop-filter: blur(10px);


    position: sticky;
    top:0;
    height: 100px;
}
 
  <body>
   
      <div class="sticky">
        <h1>This is a header</h1>
      </div>
   

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
        asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
        nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
        tempora.

      </p>
      <div style="height: 400px"></div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
        asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
        nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
        tempora.
      </p>
      <div style="height: 400px"></div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
            asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
            nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
            tempora.

        </p>
        <div style="height: 400px"></div>
    
  </body>

css
3 Answers
  1. Chrome does support background-filter. https://caniuse.com/?search=backdrop-filter (however Firefox currently does not).
  2. background-filter does not work in conjunction with background-color.
  3. You cannot see a blur effect if there is no background to blur. A blurred solid colour would look exactly the same!
  4. I recommend also removing opacity.

If you want to change the backgroiund color, try using:

  • backdrop-filter: sepia(.8);
  • backdrop-filter: hue-rotate(30deg);

to get the desired efffect.

body {
  background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages8.alphacoders.com%2F992%2F992848.jpg);
  background-size: contain;
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .sticky {
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    height: 100px;
  }
}
<body>

  <div class="sticky">
    <h1>This is a header</h1>
  </div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat tempora.

  </p>
  <div style="height: 400px"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat tempora.
  </p>
  <div style="height: 400px"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat tempora.

  </p>
  <div style="height: 400px"></div>

</body>

user_21202610

Try directly state opacity using RGBA in the background-color, it will work:

.sticky{
    background-color:rgba(255,69,0,0.5); //orangered = rgb(255,69,0)
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); //mobile-friendly


    position: sticky;
    top:0;
    height: 100px;
}
<body>
   
      <div class="sticky">
        <h1>This is a header</h1>
      </div>
   

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
        asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
        nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
        tempora.

      </p>
      <div style="height: 400px"></div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
        asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
        nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
        tempora.
      </p>
      <div style="height: 400px"></div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
            asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
            nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
            tempora.

        </p>
        <div style="height: 400px"></div>
    
  </body>

user_145953000

background-filter does not work in conjunction with background-color.

.sticky{
background-color:#3ea66263;
backdrop-filter: blur(10px);
position: sticky;
top:0;
height: 100px;
}

Works well for me. Did I miss something ?

user_181184000
Related