Apply effects behind elements with backdrop filters

Apply filter effects such as blur or color adjustments to the area behind a visual element.

읽는 시간 4분

최근 업데이트: 한 달 전

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.

중요

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)); // Angleswirl.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
```
.

기술 자료

Development

User Acquisition

Monetization

산업 분야

Unity Engine

User Manual

Script Reference