An overlay is anything drawn on top of your video: a webcam frame, an alert, a chat box, a news ticker along the bottom. In OBS all of them are just sources stacked in a scene, and once you understand how the layering works, building one is mostly a question of knowing which source type to reach for.
This guide covers the whole subject: the source types, how transparency actually works, what each overlay costs in performance, and where the free options genuinely compete with paid packs.
The four kinds of overlay
Almost everything people call an overlay is one of these, and they behave differently enough that it is worth naming them separately.
Static frames. Borders around your camera, backgrounds behind your gameplay, a nameplate. These are image files, usually PNG with transparency. They cost almost nothing to render and never change.
Alerts. Follower and subscriber notifications, triggered by an event and shown briefly. Almost always a browser source pointed at a service that holds your alert configuration.
Live data. Chat, a news ticker, scores, a countdown, current song. Also browser sources, but continuously updating rather than event driven, which changes what settings you want.
Interstitials. Starting soon screens, be right back, stream ending. Whole scenes rather than layers, usually a static image plus one or two live elements.
Browser sources, which do most of the work
Anything that changes while you stream is almost certainly a browser source. OBS embeds a full browser, loads a URL, and draws the result as a layer. That is the whole mechanism, and understanding it explains most of the problems people run into.
Three consequences follow from it, and all three catch people out.
It is not your browser. The embedded browser has its own cookies, its own storage, and no access to your logged in sessions. Anything requiring authentication needs a URL that carries its own access, which is why overlay services hand you long unguessable links rather than asking you to sign in.
It renders at the size you set, not the size you display. A source set to 1920 by 1080 renders a full page and then gets scaled into your scene. If you want a thin strip along the bottom, set the height to a strip. Scaling a full page down produces small unreadable text.
There is no mouse. Hover effects, tooltips, and click to pause do not work. Interaction is available through a menu in OBS, but not as part of the live scene.
Transparency, and the two ways to get it
An overlay is only an overlay if you can see through it. There are two approaches and they suit different setups.
Alpha. The page itself has a transparent background, and OBS composites it directly. Nothing to configure, no artefacts, no colour restrictions. This is the correct method whenever the source supports it, and modern OBS handles it natively.
Chroma key. The page renders on a solid colour, usually green, and you apply a filter to remove that colour. Necessary for hardware switchers and some older software that ignores alpha channels. It costs a little CPU and can leave fringing around edges, so it is the fallback rather than the default.
A well built overlay source will offer both. Ours uses a URL parameter, so &bg=clear gives you alpha and &bg=00b140 gives you broadcast green, with the full walkthrough in the OBS ticker setup guide.
Sizing
Set the source dimensions to the shape you want on screen rather than rendering large and scaling down.
| Overlay | Width | Height |
|---|---|---|
| Lower third strip | 1920 | 150 to 220 |
| Two line band | 1920 | 320 to 360 |
| Side rail | 500 to 650 | 1080 |
| Chat box | 400 | 600 to 800 |
| Full screen scene | 1920 | 1080 |
Judge readability at the size your audience watches, not the size you edit at. A large share of viewers are on phones, and text that is comfortable on a 27 inch monitor can be illegible at 400 pixels wide. When in doubt, larger and slower.
Performance
Every browser source is a browser. Two or three is normal and fine on modern hardware. Eight is a real cost, particularly when they animate.
Things that help, roughly in order of effect:
- Fewer sources. Combining two feeds into one page beats running two pages.
- Smaller source dimensions. Rendering 1920 by 200 is a fraction of the work of 1920 by 1080.
- Turn off Shutdown source when not visible for anything continuous. It sounds like a saving and mostly just makes the source rebuild from empty on every scene change.
- Leave Refresh browser when scene becomes active off for the same reason.
Those last two are the defaults most people never look at, and they are the difference between a ticker that is populated when you cut to a scene and one that is blank for the first few seconds.
Free versus paid
Worth being straight about where the money goes.
Free is genuinely fine for: static frames and backgrounds, alerts through the major services, chat, and basic scene layouts. There is a large amount of good free artwork and the alert services have generous free tiers.
Paying tends to buy: a coherent visual set rather than mismatched pieces, animation that does not look like a template, and live data services that cost money to run because they are pulling from an API on your behalf.
The honest split is that appearance can be free and live data usually cannot, because someone is paying for the feed underneath it.
Platform differences
Overlays are rendered by OBS and burned into your video before it leaves your machine, so the destination platform mostly does not care. What varies is the surrounding furniture.
Twitch viewers usually have chat beside the video, so an on screen chat overlay is redundant for most of your audience and useful mainly for clips and VODs. YouTube viewers more often watch full screen with chat collapsed, which makes an on screen chat box more valuable. Vertical formats need a completely different layout rather than the same one cropped.
Building one, start to finish
- Decide the layout on paper first. Which corner holds what, and what must never be covered.
- Add the static layer, a frame or background image, at the bottom of the stack.
- Add game or camera capture above it.
- Add live data sources, sized to their strip rather than full screen.
- Add alerts last so they render on top of everything.
- Watch a recording back at the size your audience uses, then fix what you cannot read.
That last step is the one people skip, and it catches almost every legibility problem before an audience does.
Common questions
Do overlays affect stream quality?
Indirectly. They cost CPU, and if your encoder is already near its limit, that shows up as dropped frames. Detailed moving overlays also give the encoder more to compress, which can cost bitrate elsewhere in the picture.
Can I use the same overlay in Streamlabs or vMix?
If it is a browser source, generally yes. Streamlabs is built on OBS and behaves almost identically. vMix works but has historically been less consistent with alpha, so the chroma fallback is the safer choice there.
Why is my browser source blank?
Usually authentication. The URL works in your browser because you are logged in, and fails in OBS because it is not. The fix is a URL that carries its own access rather than relying on a session.
How many overlays is too many?
Judged by attention rather than by count. If a viewer cannot tell where to look in the first two seconds, there is too much on screen regardless of how well each piece performs.
Where to start
Get one thing working before building a set. A single live element teaches you browser sources, transparency, and sizing all at once, and those three ideas cover most of what follows. A news or scores ticker is a reasonable first one because it is visibly useful rather than decorative, and the step by step version is here.
TT Staff
The TweetTicker Editorial Team provides real-time insights for high-velocity data environments.