How to Build and Use Custom Bezels and Overlays in RetroArch

A bezel (or overlay) frames the emulated game image with additional artwork — recreating an arcade cabinet’s marquee and control panel art, or simply adding a decorative frame — layered independently of the CRT shaders that affect the game image itself.

Step 1: enable overlays

RetroArch: Settings → On-Screen Overlay → Enable Overlay: ON

Step 2: browse and select an existing bezel pack

Settings → On-Screen Overlay → Overlay Preset →
  browse available packs, often organized by system
  or arcade cabinet type

Community-maintained bezel packs covering most classic systems and many individual arcade cabinets are widely available and installable directly through this menu on most RetroArch distributions.

Step 3: understand the two things an overlay file actually defines

The artwork image itself (the visual frame/bezel)
The "active" region — the specific rectangle within
  that image where the actual game video is displayed

An overlay isn’t just a picture placed behind the game — it’s a configuration file (.cfg) that precisely defines where within that picture the live game image should be composited.

Step 4: build a custom overlay — start with your artwork

Create or source an image (PNG) containing your desired bezel artwork, with a transparent or empty region where the game screen should show through.

Step 5: define the overlay configuration file

# mybezel.cfg
overlays = 1
overlay0_overlay = mybezel.png
overlay0_full_screen = true
overlay0_descs = 1
overlay0_desc0_x = 0.15
overlay0_desc0_y = 0.1
overlay0_desc0_width = 0.7
overlay0_desc0_height = 0.8

The desc0_x/y/width/height values (as fractions of the full image, 0 to 1) define exactly where the game’s video output should be composited within your bezel artwork — getting these values right so the game image lines up precisely with your artwork’s intended screen area is the actual work involved in building a good bezel.

Step 6: load and test your custom overlay

Settings → On-Screen Overlay → Overlay Preset →
  navigate to and select your mybezel.cfg file

Step 7: adjust the positioning values iteratively

Building a well-aligned bezel is usually an iterative process — load it, check how well the game image aligns with your artwork’s intended screen area, adjust the desc0 values, and reload, repeating until the alignment looks correct.

Step 8: save the overlay as a per-system or per-game default

Quick Menu → Overrides → Save Core Overrides

Once you’re happy with a specific bezel for a specific system, saving it as a core override (see per-game overrides) makes it load automatically for that system going forward, rather than needing to reselect it every session.

Step 9: combine bezels with CRT shaders for a complete presentation

Bezels and shaders operate independently and layer together — a bezel framing the image and a CRT shader affecting the game image’s own rendering within that frame are commonly used together for players aiming for the most complete recreation of an original arcade or console viewing experience.

Why precise alignment is the entire craft of building a good bezel

An overlay with even a slightly misaligned active-display region looks obviously wrong — game content bleeding outside the bezel’s intended screen area, or a visible gap between the game image and the bezel’s frame. The iterative process in Steps 6–7 isn’t a formality; it’s the actual work that separates a bezel that looks professionally integrated from one that looks like two mismatched images awkwardly stacked on top of each other.