Background Blur Widget

Describes how to use the Background Blur Widget to blur objects beneath a single child widget.

Choose your operating system:

Windows

macOS

Linux

On this page

Background Blur is a widget you can add to the UI layout. Use this widget to provide an opportunity to surround its content with adjustable padding and apply a post-process Gaussian blur to all backgroun behind. Background Blur Widget can contain one child widget.

This page gives basic information about using and adjustment the Background Blur Widget in the UI layout. Also, get familiar with example of using and adjustment the Background Blur Widget below using Unreal Motion Graphics UI Designer (UMG).

Details

In the Details panel for a placed Background Blur widget, there are a couple of specific options that can be set, which pertain to the Widget:

BackgroundBlur.png

Option

Description

Apply Alpha to Blur

If true, modulates the strength of the blur based on the widget alpha.

Blur Strength

Sets blurry level of the background. Larger numbers increase blur, resulting in a larger runtime cost on the GPU.

Low-Quality Fallback Brush

An image to draw (instead of applying a blur) when Low-Quality Override mode is enabled. You can enable Low-Quality Mode for background blurs by setting the cvar Slate.ForceBackgroundBlurLowQualityOverride to 1. This is usually done in the project's scalability settings.

Blur Radius

This is the number of pixels that will be weighted in each direction from any given pixel when computing the blur. A larger value is more costly but allows for stronger blurs.

Blur Corner

This is the number of pixels that will be weighted in each direction from any given pixel when computing the blur. A larger value is more costly but allows for stronger blurs.

Each of the aforementioned properties can also be set (or changed) at runtime through Blueprint Script.

BackgroundBlurBP.png

The ability to set other appearance settings (such as Horizontal and Vertical Alignment), as well as any padding around the Widget, can also be defined.

Usage Example

In the following example, we use the Background Blur Widget to highlight a menu when the game is paused, blurring out the background.

For this, we add the Blur Widget with our simplified menu, using the Blur Strength value to determine the strength of background blur being applied.

On our Menu Widget Blueprint's Graph, we create a script to handle how our menu reacts to button clicks.

BlurWidgetGraph.png

Above, when we construct the widget, we are turning on the Mouse Cursor. When the Resume button is pressed, we hide the cursor, un-pause the game, and remove the menu from being displayed. When the Quit button is pressed, we quit the game. Inside of our player character's Blueprint (see below), we add a script to create and display the menu when a key is pressed. In this case, whenever P is pressed, the game is paused when the menu is displayed.

CharacterBlueprint.png

The result is the ability to pause the game and blur the background, keeping our menu intact for players to interact with.

50_Blur.png

We could also decrease the Blur Strength from 50 (above) down to 10 (below) to make the background slightly more visible.

10_Blur.png

This page was written for a previous version of Unreal Engine and has not been updated for the current Unreal Engine 5.0 release.