UE5 Overlay UI Cards

What You Will Learn

• What the Overlay widget does in Unreal Engine UMG
• How to center an Overlay inside a Canvas Panel
• How to create a layered card using Image widgets
• How to use Fill alignment for background layers
• How to use padding to create inset card effects
• How to place text in the center of an Overlay
• How to place text at the bottom of an Overlay
• How Overlay stacking order works through hierarchy order
• Where Overlay is useful in real game UI
• Common mistakes to avoid when layering widgets

What the Overlay Widget Does

The Overlay widget is a UMG panel that lets multiple child widgets occupy the same space. Unlike a Vertical Box or Horizontal Box, it does not arrange widgets one after another. Instead, it stacks them visually.

This makes Overlay ideal when you want to build a UI element with multiple layers.

A typical Overlay structure might look like this:

Overlay
  Background Image
  Card Image
  Icon
  Text Block
  Status Badge

Each child can have its own alignment and padding, which gives you flexible positioning inside the same rectangular area.

Why Overlay Is Useful

Most game UI elements are layered. A card may have a background, a border, an icon, a title, a description, and maybe a badge or state indicator. If you try to build that using only a Canvas Panel, it can become messy.

Overlay gives you a cleaner structure because everything related to that card lives inside one container.

Good use cases include:

• HUD cards
• popup panels
• tooltips
• inventory item cards
• ability icons with cooldown text
• achievement cards
• notification boxes
• menu buttons with background layers
• dialogue boxes
• status indicators

Step 1: Create a Widget Blueprint

Start by creating a new Widget Blueprint.

In the Content Drawer:

Right-click → User Interface → Widget Blueprint

Name it something clear, for example:

WBP_OverlayCardExample

Open the widget and make sure you have a Canvas Panel as the root.

The Canvas Panel is useful as the outer layout area. The Overlay will then become the actual card container inside it.

Step 2: Add the Overlay

In the Palette panel, search for:

Overlay

Drag it into the Canvas Panel.

Select the Overlay and configure its Canvas Panel Slot settings.

Example values:

Anchor = Center
Position X = 0
Position Y = 0
Size X = 450
Size Y = 250
Alignment X = 0.5
Alignment Y = 0.5

This places the Overlay in the center of the screen and gives it a fixed card size for testing.

Why Centering Matters

Centering the Overlay makes the result easier to preview and test. The Anchor controls where the widget is attached, the Position controls its offset from that anchor, and the Alignment controls which part of the widget is placed on that position.

Setting Alignment X and Y to 0.5 means the center point of the Overlay is placed at the anchor position. This is why the card appears perfectly centered.

Step 3: Add the Background Image

Drag an Image widget into the Overlay.

Select the Image and set its Overlay Slot alignment:

Horizontal Alignment = Fill
Vertical Alignment = Fill

This makes the image stretch across the entire Overlay area.

Keep this first image as the base layer. You can use white, dark gray, or any color that makes the next layer easy to see.

Step 4: Add the Inner Card Image

Drag a second Image widget into the same Overlay.

Again, set its alignment:

Horizontal Alignment = Fill
Vertical Alignment = Fill

Now add padding to this second image.

Padding = 10

This creates an inset card effect. The first image becomes the outer background, and the second image becomes a smaller card panel inside it.

Step 5: Style the Card Layer

Select the second Image widget and change its Brush Color.

For example, you can set it to red and reduce opacity slightly.

This creates a transparent card style. You can use this technique to build glass panels, warning cards, item cards, ability cards, or modern menu panels.

For real UI work, do not rely only on random colors. Use a consistent color palette that matches your game.

Step 6: Add Center Text

Drag a Text Block into the Overlay.

Select the Text Block and configure the Overlay Slot settings:

Horizontal Alignment = Center
Vertical Alignment = Center

This places the text in the exact center of the card.

Change the text content to something simple, such as:

Main Text

You can adjust font size, color, and typography under the Appearance settings.

Step 7: Add Bottom Text

Add another Text Block into the Overlay.

Set its alignment to:

Horizontal Alignment = Center
Vertical Alignment = Bottom

This places the second text at the bottom of the card.

You can also add bottom padding if the text is too close to the edge.

Padding Bottom = 10

This is useful for subtitles, descriptions, labels, prompts, item names, small hints, or footer text.

Step 8: Understand Overlay Stacking Order

Overlay stacking is controlled by hierarchy order.

This is the important rule:

• The first child in the Overlay hierarchy is drawn behind.
• Children below it in the hierarchy are drawn on top.
• The last child appears above the earlier children.

This means your background image should be at the top of the hierarchy list, and your text should usually be lower in the list so it renders above the background.

Overlay Does Not Use Canvas Z Order

A common mistake is expecting Overlay to behave like Canvas Panel Z Order.

Canvas Panel has Z Order in its slot settings. Overlay does not work the same way. In Overlay, hierarchy order controls the visual stacking.

If something appears hidden behind another widget, reorder the children inside the hierarchy.

Recommended Overlay Hierarchy

A clean layered card can use this hierarchy:

Overlay
  Image_Background
  Image_Card
  Text_Title
  Text_Subtitle

The background renders first. The card layer renders above it. The title and subtitle render above both images.

Overlay Slot Alignment Explained

Every child inside an Overlay has its own slot alignment.

The most useful alignment setups are:

• Fill and Fill for backgrounds
• Center and Center for main labels or icons
• Center and Bottom for subtitles or prompts
• Right and Top for badges or close buttons
• Left and Bottom for hints or small labels

This is why Overlay is so flexible. You can place multiple widgets in the same card area without manually calculating positions.

Using Padding Inside Overlay

Padding lets you move a child widget away from the edges.

For example:

Card Image Padding = 10
Bottom Text Padding Bottom = 10
Top Badge Padding Top = 8, Right = 8

Padding is cleaner than manually positioning widgets with Canvas when you are working inside a layout container.

Practical Use Case: HUD Status Card

Overlay is excellent for HUD cards.

Example hierarchy:

Overlay
  Background Image
  Status Color Image
  Icon Image
  Text Block

You can use this for health status, stamina state, ammo warnings, quest alerts, or enemy detection indicators.

Practical Use Case: Inventory Item Card

A common inventory item card might need an item background, item icon, quantity text, rarity border, and selection highlight.

Overlay handles this very well:

Overlay
  Item Background
  Item Icon
  Quantity Text
  Rarity Border
  Selection Highlight

This keeps the item card modular and easy to reuse inside other containers like Wrap Box, Uniform Grid Panel, TileView, or Scroll Box.

Practical Use Case: Ability Icon with Cooldown

Overlay is also useful for ability icons.

You can stack:

• ability icon
• dark transparent cooldown overlay
• cooldown number text
• hotkey label
• disabled state effect

This is a classic use case because all of these elements need to occupy the same icon area.

Practical Use Case: Popup Window

Overlay can also work inside larger popup widgets.

Example:

Canvas Panel
  Border
    Overlay
      Popup Background
      Title Text
      Close Button
      Content Area

The Overlay helps position title, background, buttons, and content layers cleanly inside the popup.

Overlay vs Canvas Panel

Canvas Panel gives full manual position control. Overlay gives layered layout control.

Use Canvas Panel for large screen-level placement.

Use Overlay inside components when you need stacked layers.

Simple rule:

• Canvas Panel is good for placing major UI sections on the screen.
• Overlay is good for building layered components inside those sections.

Overlay vs Border

Border is a simple wrapper that can style one child with padding, color, or brush.

Overlay can hold multiple children and stack them.

A strong real-world pattern is:

Border
  Overlay
    Background
    Text
    Icon

Border gives the outer style. Overlay handles the internal layering.

Overlay vs Grid Panel

Grid Panel is for structured rows and columns. Overlay is for stacking widgets in the same space.

Use Grid Panel when you need precise cell-based layout.

Use Overlay when elements visually sit on top of each other.

Common Mistake: Wrong Hierarchy Order

If your text is hidden behind an image, your hierarchy order is probably wrong.

Put background layers first, then foreground elements after them.

Correct:

Background Image
Card Image
Text Block

Wrong:

Text Block
Background Image
Card Image

In the wrong version, the image layers can cover the text.

Common Mistake: Using Overlay for Lists

Overlay is not a list layout widget.

If you need items stacked vertically, use Vertical Box.

If you need items placed horizontally, use Horizontal Box.

If you need wrapping item flow, use Wrap Box.

Use Overlay only when the design needs visual layering.

Common Mistake: No Padding

If every layer touches the edges, the UI can look cheap and cramped.

Use padding to create breathing room. Even ten pixels can make a basic card look more intentional.

Common Mistake: Too Many Layers

Overlay makes layering easy, but do not turn every card into a pile of unnecessary widgets.

Too many layers make the hierarchy harder to maintain.

Keep layers purposeful:

• background
• main visual layer
• icon
• text
• optional badge or highlight

How to Make Overlay Cards Reusable

Once you understand the basic setup, turn your card into a reusable Widget Blueprint.

For example:

WBP_Card
  Overlay
    Background Image
    Icon Image
    Title Text
    Description Text

Then expose variables such as:

• Title
• Description
• Icon
• Background Color
• Card Opacity

This lets you reuse the same card layout across menus, inventories, ability systems, and HUD elements.

Good Widget Hierarchies with Overlay

For a simple card:

Canvas Panel
  Overlay
    Background Image
    Inner Card Image
    Center Text
    Bottom Text

For an inventory item slot:

Overlay
  Slot Background
  Item Icon
  Quantity Text
  Rarity Border

For an ability button:

Overlay
  Ability Icon
  Cooldown Overlay
  Cooldown Text
  Hotkey Text

Design Tips for Overlay UI

• Place background widgets first in the hierarchy.
• Place text and icons later so they render above backgrounds.
• Use Fill alignment for full-size background layers.
• Use Center alignment for main icons or labels.
• Use Bottom alignment for subtitles, prompts, or footer text.
• Use padding instead of manual pixel offsets when possible.
• Keep the hierarchy clean and rename important widgets.
• Turn repeated card designs into reusable Widget Blueprints.

Conclusion

In this tutorial, you learned how to use the Overlay widget in Unreal Engine UMG to build layered UI cards. You centered an Overlay inside a Canvas Panel, added background and card Image widgets, applied padding and color styling, placed Text Blocks in the center and bottom of the card, and learned how hierarchy order controls stacking.

Overlay is one of the best UMG widgets for layered interface components. Use it for cards, HUD elements, popups, item slots, ability icons, notification panels, and any UI where multiple elements need to visually stack inside the same area.

Watch the full video tutorial: Overlay in Unreal Engine UI – Build Layered Widget Cards

More Unreal Engine UI tutorials: rambod.net

Subscribe for more Unreal Engine tutorials: Subscribe to Rambod on YouTube

Resources

• YouTube Tutorial
• More Unreal Engine Tutorials
• Rambod Dev YouTube Channel

Frequently Asked Questions

What is Overlay in Unreal Engine UMG?

Overlay is a UMG panel widget that stacks multiple child widgets on top of each other inside the same layout space.

When should I use Overlay?

Use Overlay when you need layered UI, such as cards, item slots, ability icons, popups, HUD elements, tooltips, or notification panels.

How does Overlay stacking order work?

Overlay stacking is controlled by hierarchy order. Earlier children render behind, and later children render on top.

Does Overlay use Z Order?

No. Overlay does not use Canvas Panel Z Order. It uses the order of widgets in the hierarchy.

Can I align each Overlay child differently?

Yes. Each child inside an Overlay has its own slot alignment and padding settings.

Should I use Overlay or Canvas Panel?

Use Canvas Panel for large screen-level placement. Use Overlay for layered components inside your UI.