Stream Overlays: What They Are and How to Add One to OBS

A stream overlay is a graphic layer that sits on top of your video in OBS or a similar app. To add one, create a Source (Image for a PNG, Media Source for a WebM, Browser for a live URL), size it to your canvas and drag it above your capture in the source list.

Most overlay advice is about taste. The part that actually breaks streams is more boring: file type, layer order and how many browser sources are running at once. Get those right and any design will work.

The three kinds of overlay

Type	File or source	Good for	Limit
Static	PNG with transparency	Webcam frames, borders, logos	Never changes on its own
Animated	WebM with an alpha channel	Looping frames, stingers, moving panels	Costs more to decode, and MP4 has no transparency
Live	A URL in a Browser source	Alerts, chat, goals, trackers, anything with data	Each one is a small web page running on your PC

A JPG cannot be an overlay at all, because it has no transparency. If a downloaded frame shows a white or black box where your camera should be, this is usually why.

How to add an overlay to OBS

• In the Sources panel, click the plus button.
• Choose Image for a PNG, Media Source for a WebM (tick Loop), or Browser for a URL.
• For a Browser source, paste the URL and set the width and height the overlay was built for, normally 1920 by 1080.
• Drag the overlay above your game or display capture. OBS draws the list from the bottom up, so the top item is the one in front.
• Right-click the source and lock it, so a stray click during a stream does not move it.

The same steps work in Streamlabs Desktop, which is built on OBS. They also work whichever platform you broadcast to. An overlay is part of your video, so Twitch, Kick and YouTube all receive it the same way.

Check your canvas first

Open Settings, then Video, and read the Base Canvas value. Overlays are drawn for a specific size, and a 1920 by 1080 file on a 2560 by 1440 canvas will sit too small in one corner. Set the canvas to 1920 by 1080 unless you have a reason not to, and let the Output setting handle any downscale. Our guide to setting up OBS walks through the rest of that screen.

Where free stream overlays come from

You have three realistic options. Streamlabs and StreamElements both offer theme libraries, with a mix of free and paid designs. Template tools such as Canva let you export a PNG frame with a transparent background, though transparent export can sit behind a paid plan. Marketplaces sell finished packs, and many give away one free sample.

Before you use a free pack, read its licence. Some allow personal use only, which matters once your channel earns money. Also look for the editable source files: without them, changing a colour or a name means opening the pack in an image editor and rebuilding part of it.

What slows a stream down

Static images cost almost nothing. Browser sources are the expensive part, because each one runs a small copy of a browser. A handful is fine on a normal PC. Twenty, several of them animating, is a common cause of lag on a machine that handled the game without trouble.

• Tick Shutdown source when not visible on Browser sources that only appear in some scenes.
• Remove sources you have hidden and forgotten. A hidden source can keep running.
• Use a WebM loop only where the movement earns its place, since every animated layer competes with the game for your attention as well as your GPU.

If OBS reports frames lost to rendering lag, overlays are the first thing to check. The widget guide has more on choosing which panels to keep on screen, and our OBS settings guide explains how to read those frame counters.

Layout mistakes that are easy to fix

Viewers on a phone see your video small, so text under about 24 pixels at 1080p is hard to read. Keep the edges clear, because some players crop or cover them. Avoid putting a panel over the part of the game people came to watch. On a slot stream that means the reels and the balance line, which the casino interface already places in fixed spots.

Two overlays deserve their own setup notes: on-screen chat and Twitch alerts.

Overlays for casino streams

A casino stream has a problem a static pack cannot solve: the numbers change constantly. Hunt progress, the current slot, the bonus list and the break-even multiplier all need live data, and typing them into a text source by hand does not last long.

CasinoHub's OBS widgets are Browser sources that update from your hunt, chat and giveaways, and the stream layout editor puts them together into one scene you can drag around (our layout editor guide shows how). Both are free. One caution for Twitch: its rules on casino links and codes also reach logos, so read our note on showing which casino you play at before a sponsor panel goes on screen.

Frequently asked questions

What is a stream overlay?

A graphic layer placed on top of your video in broadcasting software such as OBS. It can be a static image like a webcam frame, an animated WebM, or a live web page that shows alerts, chat or other data.

How do I add an overlay to OBS?

Click the plus button in the Sources panel, pick Image, Media Source or Browser, select the file or paste the URL, then drag the source above your capture. OBS draws the source list from the bottom up, so higher items appear in front.

Do overlays slow down a stream?

Static images barely register. Browser sources use more CPU and GPU because each runs a small browser, so a large number of them, especially animated ones, can cause rendering lag on an average PC.