How to Create a Glass Blur UI Widget in Unreal Engine 5

Prefer watching instead of reading? You can also watch it directly on YouTube: Unreal Engine 5 Create Stunning Glass Blur UI Widgets in Minutes

If you enjoy Unreal Engine tutorials, subscribe to the channel here: Rambod YouTube Channel

What You Will Build

By the end of this tutorial, you will have:

• A reusable UMG widget named WBP_BlurWindow
• A transparent blur panel with a soft glass-style look
• Buttons and text placed inside the blur window
• A clean way to add the widget into your main UI
• A simple foundation you can reuse for settings menus, popup panels, and overlays

Why Use a Blur Window in Unreal Engine 5 UI?

A blur window helps separate interface content from the game scene without making the UI feel too heavy or too flat. Instead of placing a solid opaque panel on top of everything, you keep some of the background visible while still making the foreground readable.

This is useful because:

• It makes your UI look more modern and polished
• It improves readability over complex backgrounds
• It works well for futuristic, clean, or minimal design styles
• It gives you a reusable UI element for many different screens

In Unreal Engine 5, this is easy to achieve with the built-in Background Blur widget in UMG, so you do not need a complicated material setup just to get a nice effect.

Step 1: Create a New User Widget

Start inside the Content Drawer. Right-click in your desired folder, go to User Interface, and create a new User Widget.

Name the widget:

WBP_BlurWindow

Open the widget so you can begin building the layout.

Keeping this blur panel in its own widget is the right choice because it makes the element reusable. Instead of rebuilding the same panel over and over in different menus, you can drop the same widget anywhere you need it.

Step 2: Set the Widget Size

In the widget designer, set the preview size to Custom. Then use:

• Width: 500
• Height: 600

This gives you a clear working area and makes it easier to design the blur window in a controlled size. You can always resize it later inside your parent widget or main UI if needed.

A 500 by 600 panel is a good starting point for menus and compact overlays. It is large enough to hold multiple controls without becoming visually bloated.

Step 3: Add a Canvas Panel as the Base

From the Palette panel, search for Canvas Panel and drag it into the widget hierarchy.

This canvas becomes the base container for your blur window and any UI elements you want to place on top of it, such as buttons, text, icons, or settings controls.

Using a Canvas Panel here makes sense because it gives you direct control over positioning, anchors, and layout while you are building a simple standalone panel.

Step 4: Add the Background Blur Widget

Next, search for Background Blur in the Palette panel and drag it into the canvas.

This is the core of the effect. The Background Blur widget samples and blurs what is rendered behind it, which is exactly what gives the panel its transparent glass-style appearance.

Once it is inside the canvas, select it and update the anchor settings so it fills the available area.

Step 5: Stretch the Blur to Fill the Window

With the Background Blur selected, set the anchors so the widget stretches across the full panel area. Then set the offsets like this:

• Left: 0
• Top: 0
• Right: 0
• Bottom: 0

This ensures the blur widget covers the full size of the window. If you skip this and leave default offsets or anchors, the blur may only cover part of the widget, which makes the effect look broken or incomplete.

This full-stretch setup is important because the blur layer should act like the background surface of the entire panel, not just a small patch inside it.

Step 6: Adjust Blur Strength

In the Details panel for the Background Blur widget, set the Blur Strength to:

50

This is a solid starting point. It is strong enough to make the panel stand out clearly, but not so extreme that the background becomes muddy or distracting.

The best blur strength depends on your project:

• Use lower values for subtle overlays
• Use medium values for menus and readable glass panels
• Use higher values when the game scene behind the UI is visually busy

Do not treat 50 like some magical number. It is just a practical starting point. Test it against your actual scene and tune it based on readability.

Step 7: Add Buttons and Text on Top

Once the blur background is in place, add your actual interface content inside the same widget. In this example, a button is placed inside the canvas and then duplicated so the blur window contains two buttons.

To make the layout cleaner:

• Place the button where you want it inside the panel
• Set its anchor to the center if you want it aligned around the middle
• Adjust the size to fit your design
• Duplicate it to create another action button quickly

After that, add a Text Block to act as a title or label for the blur window. You can also change the text color so it stands out clearly against the blurred background.

This combination of blurred surface plus readable text and simple controls is exactly what makes the effect useful in production. It is not just decoration. It creates a clean container for real interface elements.

Step 8: Add the Blur Window to Your Main UI

After building the standalone blur widget, move to your main widget, the one already connected to your map or shown at Event Begin Play.

Drag WBP_BlurWindow into that main widget and set its size:

• Size X: 500
• Size Y: 600

Then set the anchor to the center so the panel appears properly positioned on screen.

This is a smart setup because it separates your reusable blur panel from the broader screen layout. The blur window remains modular, while your main UI decides where and when it appears.

Step 9: Test the Result

Compile, save, and hit Play. At this point, you should see a soft transparent glass-style panel with the blur effect visible behind your buttons and text.

If it does not look strong enough, go back into WBP_BlurWindow, select the Background Blur widget, and adjust the blur strength until it fits your scene better.

A blur window usually looks different depending on what is behind it. A bright scene, dark scene, or cluttered background can all change the visual result. That is normal. Fine-tuning is part of the process.

Common Mistakes to Avoid

• Forgetting to stretch the blur widget: If the anchors and offsets are wrong, the panel will not fill the window correctly.
• Using blur without content hierarchy: Your text and buttons should sit clearly above the blur layer.
• Overdoing blur strength: Too much blur can make the panel feel heavy and reduce visual quality.
• Not testing against real gameplay backgrounds: A blur that looks good in the designer may not look good in the actual game scene.
• Building everything in one giant widget: Keep reusable UI elements modular instead of stuffing all logic into a single screen.

Ways to Improve This Widget Further

This basic blur window already looks good, but you can push it further if you want a more polished result:

• Add a border or rounded frame around the panel
• Use a soft semi-transparent tint over the blur for better readability
• Add hover animations to buttons
• Create a variable blur strength so different windows use different intensity
• Turn the title text into an exposed variable so the panel can be reused for different screens
• Add padding and layout containers for a cleaner production-ready UI

This is where the tutorial stops being just a cool visual trick and starts becoming a real reusable UI component.

Why This Setup Works Well

The reason this approach works is simple: it uses Unreal Engine 5's built-in UMG tools in a clean and modular way. You create one dedicated blur panel widget, fill it with a Background Blur, place your interface elements on top, and then reuse that widget anywhere in your project.

That means less duplication, easier maintenance, and a much cleaner UI workflow overall.

For quick menus, stylish overlays, and modern interface design, this is one of the easiest wins you can add to your Unreal Engine project.

Conclusion

In this tutorial, you created a reusable glass blur UI widget in Unreal Engine 5 by building a new User Widget, adding a Canvas Panel, placing a Background Blur inside it, stretching it to fill the full panel, setting the blur strength, and adding buttons and text on top. Then you placed that widget inside your main UI and centered it on screen.

The result is a simple but effective transparent window that looks modern, clean, and easy to reuse in future menus or overlays.

If you want to keep learning Unreal Engine UI, game systems, and practical UE5 workflows, check out the full video and subscribe to the channel for more tutorials.

Watch this tutorial on YouTube
Subscribe to Rambod on YouTube

Quick Tutorial Summary

• Create a new User Widget named WBP_BlurWindow
• Set the preview size to 500 x 600
• Add a Canvas Panel
• Add a Background Blur widget
• Stretch it with full anchors and zero offsets
• Set Blur Strength to 50
• Add buttons and a text block
• Place the blur widget inside your main UI and center it
• Test and fine-tune the blur strength based on your scene

Frequently Asked Questions

What is the best blur strength for a glass UI in Unreal Engine 5?

There is no perfect value for every project. A blur strength of 50 is a solid starting point, but the right value depends on how busy or bright your background scene is.

Can I reuse the same blur window in multiple menus?

Yes. That is exactly why creating it as a separate widget is a good idea. You can place the same blur panel in settings menus, popups, inventory windows, or pause screens.

Do I need a custom material for this blur effect?

No. For this setup, Unreal Engine 5 already provides the Background Blur widget in UMG, so you can build the effect directly in the UI designer.

Can I put buttons and text inside a Background Blur window?

Yes. That is the standard use case. The blur acts as the background surface, while buttons, labels, and other controls sit visually above it.

Is this effect good for pause menus and settings screens?

Yes. It is one of the best simple use cases because the blur keeps the game scene visible while still separating the menu from the background.