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.

>Solution :

• Try the @supports feature query in CSS:

.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.