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.

Important: The Universal Render Pipeline (URP) is the only render pipeline that supports backdrop filters. In the Built-In Render Pipeline and the High Definition Render Pipeline (HDRP), UI Toolkit ignores the property.

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.

The backdrop-filter property also supports custom filters. Use the same filter function that you use with the filter property, and reference the path to the custom filter asset:

.custom-backdrop {
    backdrop-filter: filter("/Assets/Filters/CustomFilter.asset" 10px);
}

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 window, select Inline Styles > Backdrop Filter.
Select Add (+) to add a filter function.
Set Function to a built-in filter function, such as Blur, Grayscale, or Invert. To use a custom filter instead, set Function to Custom and set Definition to the custom filter asset.
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 };

To apply a custom filter, create the FilterFunction from a FilterFunctionDefinition asset and add the parameters that the filter expects:

// Create a filter function from a custom filter function definition.
var swirl = new FilterFunction(functionDef);
swirl.AddParameter(new FilterParameter(58.9f)); // Angle
swirl.AddParameter(new FilterParameter(2.3f));  // Radius

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

Limitations

The backdrop-filter property has the following limitations:

URP is the only render pipeline that supports backdrop filters. In the Built-In Render Pipeline and HDRP, UI Toolkit ignores the property.
A custom filter can’t sample content outside the element’s bounds. UI Toolkit captures only the area behind the element and clamps the result at its edges.
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