UE5 Smooth UI Fade

What You Will Build

You will create a simple menu widget that fades in when it appears and fades out before it is removed from the screen. The menu will be triggered with a keyboard input, and the system will also switch the player into UI mode so the mouse cursor can interact with the menu properly.

The final result includes:

• A Widget Blueprint menu
• A centered UI panel
• A transparent background image
• A button with text
• A Fade In animation
• A Fade Out animation
• Keyboard toggle input
• Mouse cursor visibility control
• Game and UI input mode switching
• Clean widget removal after fade out

Why Fade Animations Matter in Game UI

UI animation is not just visual decoration. It changes how the interface feels. If every menu appears instantly, the game can feel rough or unfinished. A short fade transition makes the UI feel intentional and gives players a softer visual change.

This is useful for:

• Pause menus
• Inventory screens
• Settings panels
• Quest dialogs
• Warning popups
• Loading overlays
• Title cards
• Splash screens
• Interaction prompts

The technique is lightweight because it only animates opacity. You are not moving complex widgets, spawning actors, or running expensive logic. For most menu transitions, opacity animation is enough.

System Overview

The setup has two main parts.

WBP_Menu
  Contains the UI layout
  Contains FadeIn and FadeOut animations

BP_ThirdPersonCharacter
  Listens for keyboard input
  Creates the widget
  Adds it to viewport
  Plays fade animations
  Switches input mode
  Removes the widget after fade out

The widget handles presentation. The character Blueprint handles when the menu appears and disappears. That separation keeps the system easier to understand and easier to reuse.

Step 1: Create the Widget Blueprint

Start inside the Content Drawer.

Right-click → User Interface → Widget Blueprint

Name the widget:

WBP_Menu

Open WBP_Menu. This is where you will design the menu and create the fade animations.

For this tutorial, the menu can be simple. The goal is to understand the fade workflow, not to build a complex menu design.

Step 2: Build the Menu Layout

In the Designer view, create the menu structure.

Use a simple hierarchy like this:

Canvas Panel
  Size Box
    Canvas Panel
      Image
      Button
        Text Block

The outer Canvas Panel acts as the full-screen root. The Size Box becomes the main menu container. The inner Canvas Panel gives you local layout control inside the menu.

Step 3: Center the Menu Container

Select the Size Box and configure its Canvas Panel Slot.

Anchor = Center
Position X = 0
Position Y = 0
Alignment X = 0.5
Alignment Y = 0.5
Width = 600
Height = 300

The center anchor places the widget around the middle of the viewport. Alignment values of 0.5 and 0.5 move the pivot to the center of the widget. Without this alignment, the widget may be offset from the center because Unreal positions it from its top-left corner by default.

This is one of the most common UI mistakes beginners make. Anchor controls the reference point. Alignment controls the pivot. For centered UI, you usually need both.

Step 4: Add a Background Image

Inside the menu container, add an Image widget. This will act as the menu background.

Set it to fill the menu area. Then adjust its brush color.

Brush Color = Light Gray
Alpha = 0.2

The alpha value controls transparency. A low alpha value gives the menu a soft transparent panel look. This is useful for pause menus or overlay panels where you still want the game scene slightly visible behind the UI.

Step 5: Add a Button

Add a Button widget inside the menu and place a Text Block inside the button.

Example text:

Exit

This button is mainly for visual structure in this tutorial. You do not need to wire its click logic unless you want to expand the menu later.

At this point, you have a basic menu panel. Now we can animate it.

Step 6: Why Animate Render Opacity?

For fade animations, you should animate Render Opacity, not Visibility.

Visibility is a state. It is either visible, hidden, collapsed, or hit-testable depending on the setting. It does not create a smooth transition by itself.

Render Opacity is a numeric value from 0 to 1.

0 = fully transparent
1 = fully visible

Because it is numeric, Unreal can interpolate between values over time. That is exactly what we need for fade animation.

Step 7: Create the Fade In Animation

In the Animations panel inside WBP_Menu, create a new animation.

FadeIn

Add the Size Box or your main menu container to the animation track. You want to animate the whole menu container, not every small child widget one by one.

Create these keyframes:

Time 0.0 seconds:
  Render Opacity = 0

Time 1.0 seconds:
  Render Opacity = 1

This means the menu starts invisible and becomes fully visible over one second.

If you want a faster menu, use 0.3 or 0.5 seconds. One second is easy to see during a tutorial, but in production UI you may want shorter timing.

Step 8: Create the Fade Out Animation

Create another animation in the Animations panel.

FadeOut

Add the same Size Box or main menu container to the animation track.

Create these keyframes:

Time 0.0 seconds:
  Render Opacity = 1

Time 1.0 seconds:
  Render Opacity = 0

This is the reverse of FadeIn. It starts fully visible and becomes transparent.

Compile and save the widget after creating both animations.

Step 9: Play Fade In on Construct

Switch to the Graph tab inside WBP_Menu.

Use Event Construct to play the FadeIn animation automatically when the widget is created.

Event Construct
  Play Animation
    Animation = FadeIn

Event Construct runs when the widget is initialized. This means every time the menu is created and added to the viewport, it will fade in automatically.

This is a clean setup because the widget is responsible for its own entrance animation.

Step 10: Create the Keyboard Input

Open BP_ThirdPersonCharacter or the character Blueprint used by your project.

For this tutorial, use the H key to toggle the menu.

H Key Pressed

You can replace H with any key you prefer. For a pause menu, Escape is common. For inventory, I is common.

Step 11: Create and Store the Widget Reference

From the H key input, create the widget.

Create Widget
  Class = WBP_Menu

Promote the return value to a variable:

MenuWBP

This variable is important. It stores a reference to the created widget so you can play animations on it later and remove it when needed.

Without storing a reference, you may create multiple menus and lose control of which one should be removed.

Step 12: Add the Widget to the Viewport

After creating the widget, add it to the screen.

Create Widget → Add to Viewport

Because FadeIn is already played in Event Construct inside WBP_Menu, the menu should fade in automatically once it appears.

Step 13: Set Input Mode to Game and UI

When the menu is open, the player needs to interact with UI elements. For that, you should switch the input mode.

Get Player Controller
Set Input Mode Game and UI
Set Show Mouse Cursor = true

This allows the player to still have game context while also being able to use UI. If your menu should completely pause gameplay interaction, you can use UI Only instead, but Game and UI is flexible for beginner projects.

Step 14: Toggle the Menu with FlipFlop

A simple beginner approach is to use a FlipFlop node.

H Key Pressed
  FlipFlop
    A = Open Menu
    B = Close Menu

On the A output, create and show the menu.

On the B output, play FadeOut, wait for the animation to finish, then remove the widget from the parent.

This creates a basic toggle system.

Step 15: Play Fade Out Before Removing the Widget

When closing the menu, do not remove it immediately. If you remove it instantly, the fade-out animation will never be visible.

Correct close flow:

MenuWBP → Play Animation FadeOut
Delay 1.0 seconds
MenuWBP → Remove From Parent

The delay should match the fade-out animation duration. If FadeOut takes one second, use a one second delay.

If you change FadeOut to 0.5 seconds, update the delay to 0.5 seconds.

Step 16: Restore Game Input After Closing

After removing the widget, return input control back to the game.

Get Player Controller
Set Input Mode Game Only
Set Show Mouse Cursor = false

This prevents the mouse cursor from staying visible after the menu is gone.

Step 17: Use Validated Get for Safety

Before calling FadeOut or Remove From Parent, check that MenuWBP is valid.

You can use:

Is Valid

Or convert the widget variable to a validated get.

This protects the Blueprint from trying to use a widget reference that does not exist.

A safe close flow looks like this:

Is MenuWBP Valid?
  Valid:
    Play FadeOut
    Delay
    Remove From Parent
    Set Input Mode Game Only
    Show Mouse Cursor false

Complete Blueprint Flow

The full toggle logic can be understood like this:

H Key Pressed
  FlipFlop

  A:
    Create Widget WBP_Menu
    Store as MenuWBP
    Add to Viewport
    Set Input Mode Game and UI
    Show Mouse Cursor true

  B:
    If MenuWBP is valid:
      Play FadeOut
      Delay 1 second
      Remove From Parent
      Set Input Mode Game Only
      Show Mouse Cursor false

This is simple, readable, and works well for beginner UI systems.

Why the Fade In Can Live Inside the Widget

FadeIn is triggered from Event Construct inside WBP_Menu. That makes sense because the widget knows how it should appear.

The character Blueprint only needs to create and display it.

This is a cleaner pattern:

Widget handles its own intro animation.
Character handles when the widget is created or removed.

That separation keeps your UI easier to reuse. If you later create the same widget from another Blueprint, the fade-in still works automatically.

Why the Fade Out Is Triggered Externally

FadeOut is triggered from the character Blueprint because the character is deciding to close the menu.

The important detail is timing. The widget must remain on screen until FadeOut finishes. Only after that should it be removed.

If you remove the widget first, there is nothing left to animate.

Common Problem: Fade In Does Not Play

If the fade-in animation does not play, check these points:

• Did you create the FadeIn animation inside WBP_Menu?
• Did you add the correct widget or container to the animation track?
• Are you animating Render Opacity, not Visibility?
• Is Event Construct connected to Play Animation?
• Are you adding WBP_Menu to the viewport?

Common Problem: Fade Out Does Not Show

If the menu disappears instantly, you are probably removing it too early.

The correct order is:

Play FadeOut
Delay for animation duration
Remove From Parent

Do not remove the widget before the delay.

Common Problem: Cursor Stays on Screen

If the mouse cursor stays visible after closing the menu, make sure you reset it.

Set Show Mouse Cursor = false
Set Input Mode Game Only

This should happen after the menu is removed.

Common Problem: Menu Opens Multiple Times

If pressing the key creates multiple menu instances, you need better reference checking.

Before creating the widget, check whether MenuWBP is already valid.

If MenuWBP is not valid:
  Create Widget
  Add to Viewport

FlipFlop works for basic tutorials, but for production UI, a boolean like IsMenuOpen is usually cleaner.

Better Production Version: Use a Boolean

FlipFlop is fast for learning, but it can become unreliable if the widget is removed by another event. A more reliable version uses a boolean.

IsMenuOpen : Boolean

Logic:

H Key Pressed
  Branch IsMenuOpen

  False:
    Open Menu
    Set IsMenuOpen = true

  True:
    Close Menu
    Set IsMenuOpen = false

This gives you more control and makes the state easier to debug.

How to Reuse This Fade System

Once you understand this workflow, you can reuse it for almost any widget.

Use the same pattern for:

• Pause menu
• Inventory panel
• Settings menu
• Quest dialog
• Notification popup
• Game over screen
• Mission start title
• Warning prompt

The only thing that changes is the widget design. The fade logic stays almost the same.

Best Practices for UI Fade Animations

• Animate a main container instead of every child widget.
• Use Render Opacity for fade effects.
• Do not remove the widget before FadeOut finishes.
• Store the widget reference after creating it.
• Use Is Valid before calling functions on a widget reference.
• Switch to Game and UI input mode when the menu is open.
• Switch back to Game Only when the menu closes.
• Keep animation duration short for gameplay menus.
• Use a boolean state for production systems instead of relying only on FlipFlop.

Recommended Timing Values

For tutorials, one second is useful because the fade is clearly visible. For real game UI, faster values often feel better.

Fast popup:
  0.15 to 0.25 seconds

Normal menu:
  0.25 to 0.5 seconds

Cinematic title card:
  0.75 to 1.5 seconds

Do not make every menu animation too slow. Long UI transitions can feel annoying if the player opens menus frequently.

Where This Fits in a UI System

This fade setup is a small part of a larger UI architecture. In bigger projects, you may eventually create a UI Manager inside the Player Controller, HUD, or Game Instance.

A UI Manager can handle:

• Opening and closing menus
• Preventing duplicate widgets
• Managing input mode
• Playing transitions
• Stacking UI screens
• Pausing and unpausing gameplay

For beginners, doing this inside the character is fine. For larger projects, moving UI control into Player Controller or a dedicated UI manager is usually cleaner.

Conclusion

You have now created a smooth fade-in and fade-out UI animation in Unreal Engine using UMG and Blueprints. The system creates a widget, fades it in, allows UI interaction, fades it out, and removes it cleanly.

The key idea is simple: animate Render Opacity, store your widget reference, and wait for FadeOut to finish before removing the widget from the viewport.

This is a beginner-friendly technique, but it is also practical. You will use this same pattern again and again for menus, popups, inventory panels, title cards, and clean game UI transitions.

Watch the full tutorial: Smooth Fade UI Animation in Unreal Engine

Related tutorial: Make Your Game Look Awesome With This Simple Fade Trick

More Unreal Engine tutorials: rambod.net

Subscribe for more: Rambod YouTube Channel

Resources

• YouTube Tutorial
• Original Article
• Related Fade UI Tutorial
• Rambod Dev YouTube Channel
• More Unreal Engine Tutorials

Frequently Asked Questions

Should I animate Visibility or Render Opacity?

Use Render Opacity for smooth fade animation. Visibility is useful for enabling or disabling interaction, but it does not create a gradual fade by itself.

Why does my fade-out not play?

You are probably removing the widget immediately. Play FadeOut first, wait for the animation duration with a Delay, then call Remove From Parent.

Can I use this for a pause menu?

Yes. This technique works well for pause menus. You can also pause the game when the menu opens and unpause after it closes.

Can I use this for inventory?

Yes. The same fade-in and fade-out pattern works for inventory screens, settings panels, dialog boxes, and other UI widgets.

Why do I need Set Input Mode Game and UI?

It allows the player to interact with UI while still keeping the game context available. Without it, mouse clicks may not work correctly on buttons.

Why should I store the widget as a variable?

You need a reference to the created widget so you can play FadeOut and remove the correct widget later. Without a reference, you can easily create duplicate widgets or lose control of the active one.

Is FlipFlop good for production?

FlipFlop is fine for quick tutorials. For production, a boolean like IsMenuOpen is usually better because it gives you clearer control over the menu state.