Apply effects behind elements with backdrop filters

You can use the backdrop-filter USS property to apply filter effects to the area behind a visual element. Unlike the filter property, which processes the element and its children, backdrop-filter processes what’s rendered behind the element. This is useful for effects such as frosted-glass panels, where the content behind a panel appears blurred. The backdrop-filter property is similar to the CSS backdrop-filter property.

When an element has a backdrop filter, UI Toolkit captures the content already rendered behind the element, applies the filter functions to it, and draws the result under the element. The result is clipped to the element’s shape, including its rounded corners. The captured content includes other visual elements rendered behind the element and, for runtime panels that render as a screen overlay, the camera output behind the UI.

The element’s own background, border, and content render on top of the filtered backdrop and aren’t affected by the filter. To keep the filtered backdrop visible, use a transparent or semi-transparent background color for the element.

Supported filter functions

The backdrop-filter property supports the same built-in filter functions as the filter property:

backdrop-filter: blur(<length>) | grayscale(<number>) | invert(<number>) | opacity(<number>) | sepia(<number>) | tint(<color>) | hue-rotate(<angle>) | contrast(<number>) | drop-shadow(<offset-x> <offset-y> <blur-radius> <color>)

You can combine multiple filter functions in a single backdrop-filter declaration. Filters work as a sequential pipeline where each pass processes the output from the previous pass.

Note: Custom filters aren’t supported with backdrop-filter. If you include a custom filter function, UI Toolkit ignores it and logs a warning.

Apply backdrop filters to visual elements

You can apply backdrop filters to visual elements in UI Builder, USS, or C# code.

Apply backdrop filters in UI Builder

To apply a backdrop filter to a visual element in UI Builder:

Open the UI Builder and create a new UXML file or open an existing one.
Select the visual element you want to apply the backdrop filter to.
In the Inspector panel, select Inline Styles > Backdrop Filter.
Select the Add (+) button to add a filter function.
Select a built-in filter function from the dropdown menu, such as blur, grayscale, or invert.
Set the parameters for the filter function, such as the blur radius or grayscale percentage.
Repeat steps 4–6 to add more filter functions if needed.

Apply backdrop filters with USS

To apply a backdrop filter to a visual element, use the backdrop-filter property in a USS file. The following example creates a frosted-glass panel that blurs the content behind it:

.frosted-panel {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

To combine multiple filter functions, list them in the same declaration:

.frosted-panel-desaturated {
    backdrop-filter: blur(10px) grayscale(50%);
}

If multiple classes each define a backdrop-filter and you apply them to the same element, the filter applied last takes precedence over the earlier ones instead of combining the effects. For more information, refer to Selector precedence.

Apply backdrop filters in C# code

To apply backdrop filters to a visual element in C# code, create a list of FilterFunction objects and assign it to the visual element’s style.backdropFilter property. For example:

// Create a blur filter using the built-in blur filter function.
var blur = new FilterFunction(FilterFunctionType.Blur);
blur.AddParameter(new FilterParameter(10.0f));

// Apply the blur to the area behind the element.
element.style.backdropFilter = new List<FilterFunction> { blur };

Limitations

The backdrop-filter property has the following limitations:

Custom filters aren’t supported. UI Toolkit ignores custom filter functions in a backdrop-filter declaration and logs a warning.
Backdrop filters render only on panels that use screen-space rendering. They aren’t supported on world-space panels rendered by a camera.
USS transitions aren’t supported for backdrop-filter.

Additional resources

Apply common effects with built-in filters

Create and apply custom filters