'Fallback color for backdrop-filter: blur();

I'm currently using:

.blurBox {
    background-color: #FFFFFF90;
    backdrop-filter: blur(1rem);
}

But since FireFox doesn't currently support backdrop-filter: blur(), it uses the fallback of #FFFFFF90. The problem is that the fallback is too transparent. I can't simply change the fallback because it will affect the way the backdrop-filter looks as well.

My question is how do I make a separate fallback color that the backdrop-filter isn't reliant on? I want to avoid doing browser-specific CSS if possible.

htmlcss


Solution 1:[1]

.blurBox {
  --fallback-background: #FFF9;
  --background: #FFF;
  background-color: var(--fallback-background); /* Fallback */
}
@supports (backdrop-filter: blur()) {
  .blurBox {
    background-color: var(--background);
    backdrop-filter: blur(1rem);
  }
}

  • For browsers that don't understand what a supports query is:
    They likely also don't support backdrop filter - so they will run the fallback, and then completely ignore everything inside the supports rule.

  • For browsers that don't support backdrop-filter: blur():
    They will run the fallback, and then ignore everything inside the supports rule.

  • For browsers that understand the supports query and support backdrop-filter: blur():
    Everything inside the supports rule will be run, and the background-color will override the fallback.

Solution 2:[2]

According to my ken you can't what you can do is use Hsl I think it will do the work (ofcourse not the blur effect) as there you can play with hue saturation and opacity.

background-color:hsl(5, 20%, 90%);

You can also use support

@supports (backdrop-filter: blur(1rem) {
 .blurBox {
    background-color: #FFFFFF90;
    backdrop-filter: blur(1rem);
}
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Pranjal

Related Questions