Implementing Frosted‑Glass (Backdrop‑Filter) Effects in Firefox Using CSS Workarounds

What is backdrop-filter

The CSS backdrop-filter property lets you apply graphical effects such as blur or color shift to the area behind an element, requiring the element or its background to be at least partially transparent.

It works similarly to filter , but filter affects the element itself while backdrop-filter affects the backdrop.

Comparison of backdrop-filter and filter

Both accept the same values; the difference lies in the target area. The following pseudo‑code demonstrates the two approaches:

Normal
filter
backdrop-filter

.bg {
    background: url(image.png);
    & > div {
        width: 300px;
        height: 200px;
        background: rgba(255,255,255,.7);
    }
    .g-filter { filter: blur(6px); }
    .g-backdrop-filter { backdrop-filter: blur(6px); }
}

When backdrop-filter is unavailable (e.g., Firefox), the effect disappears.

Compatibility of backdrop-filter

Although the property has existed for a while, Firefox still does not support it, which is problematic for PC‑side business that must work in Firefox.

Achieving Frosted‑Glass Effect in Firefox

The article focuses on reproducing the frosted‑glass effect without using backdrop-filter in Firefox.

Using background-attachment: fixed for Static Backgrounds

For a static background image, you can overlay a duplicate image, fix its position, and apply filter: blur() :

frosted glass effect

$img: 'https://static.pexels.com/photos/373934/pexels-photo-373934.jpeg';
body {
    height: 100vh;
    display: flex;
    background-image: url($img);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.g-glossy {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: rgba(255,255,255,0.5);
    overflow: hidden;
    z-index: 10;
    &::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url($img);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        filter: blur(10px);
        z-index: -1;
    }
}

This method works in browsers that lack backdrop-filter but can handle static images.

Drawbacks of the background-attachment: fixed Method

Because a pseudo‑element adds an extra background layer, the original element’s background color may not be fully visible; an additional pseudo‑element may be needed to restore it.

The pseudo‑element’s blurred edges can show white fringes; expanding its size solves the issue.

.g-glossy {
    overflow: hidden;
    ...
    &::before {
        content: "";
        position: absolute;
        top: -100px;
        left: -100px;
        right: -100px;
        bottom: -100px;
    }
}

Using -moz-element() with filter: blur() for Complex Backgrounds

Firefox supports the experimental -moz-element() function, which can capture a live rendering of any HTML element as an image.

By copying the UI of a complex DOM element and applying a blur filter, you can simulate a frosted‑glass effect on dynamic content.

Content

.g-element-copy {
    margin: auto;
    width: 200px;
    height: 200px;
    // core code
    background: -moz-element(#bg);
}

The copied element updates in real time as the source changes.

Combining -moz-element() with CSS Feature Detection

Using @supports (background: -moz-element(#bg)) , you can conditionally apply the Firefox‑specific styles while keeping the standard .g-glossy for browsers that support backdrop-filter :

.bg { /* page DOM */ }
.g-glossy {
    position: fixed;
    width: 600px;
    height: 300px;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}
.g-glossy-firefox { display: none; }
@supports (background: -moz-element(#bg)) {
    .g-glossy-firefox {
        display: block;
        position: fixed;
        width: 600px;
        height: 300px;
        background: -moz-element(#bg) no-repeat;
        filter: blur(10px);
    }
}

JavaScript is used to keep the pseudo‑element aligned with the original element during scrolling:

$(function(){
    let blur = $('.g-glossy-firefox')[0].style;
    let offset = $('.g-glossy').eq(0).offset();
    function updateBlur(){
        blur.backgroundPosition = `${-window.scrollX - offset.left}px ${-window.scrollY - offset.top}px`;
    }
    document.addEventListener('scroll', updateBlur, false);
    updateBlur();
});

Summary

You can use backdrop-filter for a simple frosted‑glass effect in browsers that support it.

For browsers without backdrop-filter , a static background can be simulated with background-attachment: fixed and filter: blur() .

In Firefox, -moz-element() combined with filter: blur() enables complex background frosted‑glass effects.

When none of the above methods work, fallback to a semi‑transparent background (e.g., background: rgba(255,255,255,0.5) ) to avoid visual bugs.

References

[1] CodePen Demo – filter vs. backdrop-filter: https://codepen.io/Chokcoco/pen/WNjebrr

[2] CodePen Demo – background‑attachment: fixed | filter: blur(): https://codepen.io/Chokcoco/pen/XWRrVma

[3] CodePen Demo – optimized background‑attachment method: https://codepen.io/Chokcoco/pen/abWbzKG

[4] Can I use – CSS element(): https://caniuse.com/css-element-function

[5] CodePen Demo – -moz-element (Firefox only): https://codepen.io/Chokcoco/pen/jOmOPPL

[6] Implementing a frosted‑glass header: https://chaoli.club/index.php/5347

[7] CodePen Demo – Firefox‑compatible complex frosted‑glass effect: https://codepen.io/Chokcoco/pen/ExWqaQG