Skip to main content

Backdrop Filters

backdrop filters allow you to change the way the background behind an element is displayed. They are handy for making a background image greyscale, inverting the colors, or blurring the background with a frosted glass type effect. We've added a desaturate backdrop filter to our utlitity classes so you can easily manipulate your background images.

Desaturate​

A simple one to begin with is a desaturate backdrop filter. This simple makes the image appear black and white. This is incredibly useful when using a color overlay to help ensure the foreground text stands out from the background. This way, if you add a blue semi-transparent overlay, for instance, the background colors won't look unnatural under the blue overlay.

Simply add the class .backdrop-saturate-0 to your page builder row to see it in action.

For reference, this is the CSS code we are using:

utilities.css
body:not(.fl-builder) .backdrop-saturate-0,
.backdrop-saturate-0 .fl-row-content-wrap:after,
.backdrop-saturate-0 .fl-col-content::after {
    -webkit-backdrop-filter: saturate(0);
    backdrop-filter: saturate(0);
}

Blur​

We've also added a blur filter effect so you can get the frosted glass effect. Add the .backdrop-blur class to activate that effect.

utilities.css
body:not(.fl-builder) .backdrop-blur,
.backdrop-blur .fl-row-content-wrap:after,
.backdrop-blur .fl-col-content::after {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

Remove on Hover​

If you want a backdrop filter to disappear when the user hovers over the element, add the .backdrop-none-hover class. This is useful for interactive sections where you want to reveal the full background image on hover.

utilities.css
body:not(.fl-builder) .backdrop-none-hover:hover,
.backdrop-none-hover:hover .fl-row-content-wrap:after,
.backdrop-none-hover:hover .fl-col-content::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

Transition​

To animate the backdrop filter change smoothly (e.g., when combined with .backdrop-none-hover), add the .backdrop-transition class. This applies a 0.3s ease transition to the backdrop filter property.

utilities.css
body:not(.fl-builder) .backdrop-transition,
.backdrop-transition .fl-row-content-wrap:after,
.backdrop-transition .fl-col-content::after {
    transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
tip

Combine .backdrop-blur, .backdrop-none-hover, and .backdrop-transition on the same row for a smooth frosted-glass-to-clear hover effect.