If your overlay is not showing on OBS, the cause is almost always one of five things: the source is hidden (eye icon off), it sits below your game or camera in the Sources list, it lives in a different scene, a browser source has the wrong URL or size, or the file has no transparency. Check them in that order and most overlays come back in under two minutes.
This guide walks through every common cause in OBS Studio, including StreamElements and Streamlabs browser overlays, chat boxes and alerts that stay blank, and overlays that show up as a black box. Start with the quick checklist, then jump to the section that matches what you see.
Quick checklist: overlay not showing on OBS
Run through this list before changing any settings. Each item takes a few seconds.
- Eye icon: in the Sources dock, the eye next to the overlay must be open.
- Source order: the overlay must be above your game, display or webcam source in the list.
- Active scene: the overlay must be in the scene that is currently selected (or nested inside it).
- On the canvas: right-click the source and choose Transform > Reset Transform to bring it back if it was dragged or scaled off screen.
- Browser source URL and size: the URL is the overlay's own link (not the editor page) and the size matches the overlay, usually 1920 x 1080.
- Refresh: open the browser source properties and click Refresh cache of current page.
- Events: alerts and chat boxes are empty until something happens, so send a test alert or chat message.
Symptoms, causes and fixes at a glance
Match what you see to the most likely cause. The sections below explain each fix in detail.
| What you see | Most likely cause | Fix |
|---|---|---|
| Overlay listed in Sources but invisible | Eye icon off, or overlay is below the game/display source | Turn the eye on and drag the overlay to the top of the list |
| Overlay visible in one scene, missing in another | Source only added to one scene | Add it as an existing source, or nest an overlay scene |
| Overlay shows in OBS but not on your monitor while gaming | Normal behavior: OBS only adds overlays to its output | Nothing to fix; check the stream or a Projector instead |
| Browser source is blank or transparent | Wrong URL, wrong size, stale cache or hardware acceleration issue | Re-copy the URL, set 1920 x 1080, refresh cache, toggle hardware acceleration |
| Alerts or chat box never appear | No event has fired yet, or the source unloads when hidden | Send a test alert; turn off "Shutdown source when not visible" |
| Overlay shows a black or white box | File or page has no transparency | Use a PNG or a WebM with alpha; restore the default Custom CSS |
| Animated overlay plays once, then disappears | Media source Loop is off | Enable Loop in the media source properties |
| Source has a red or empty preview after moving files | OBS can no longer find the file | Point the source to the new file location |
Is the overlay hidden or behind another source?
This is the number one reason an overlay is not working in OBS. In OBS Studio, sources higher in the Sources list are drawn on top of the sources below them, so a full-screen game or display capture placed above your overlay will cover it completely.
- Fix the order: select the overlay and drag it to the top of the Sources list, or use the up arrow at the bottom of the dock. Your webcam frame should sit above the camera, and both should sit above the game. The OBS Sources guide explains this layering.
- Check the eye icon: a closed eye means the source is hidden in the preview and on stream.
- Check filters: right-click the source and open Filters. A Color Key, Chroma Key or Image Mask filter with the wrong settings, or a Color Correction filter with Opacity at 0, can make an overlay vanish. Disable filters one at a time to find the culprit.
Is the overlay in the right scene?
A source only appears in the scenes you added it to. If your overlay shows on your "Gameplay" scene but not on "Just Chatting", it was never added to the second one.
- Select the scene where the overlay is missing.
- Click + in the Sources dock and pick the same source type.
- Choose Add Existing and select your overlay. Changes you make to it will now apply in both scenes.
A cleaner long-term setup is one scene called "Overlay" that holds your frame, labels and alerts, then adding that scene as a source inside every other scene. Also confirm the right Scene Collection is active in the top menu, since switching collections swaps every scene at once.
If you use Studio Mode, remember the left panel is the preview and the right panel is what goes live. An overlay you just added appears on stream only after you click Transition.
Why does my overlay show in OBS but not in game?
This is expected. OBS adds overlays to the video it records and streams, not to your own monitor. Your viewers see the overlay; you do not see it on top of your game while you play.
To check what viewers see, watch your stream on a second device, or right-click the preview and open a Windowed Projector. The setting called "Capture third-party overlays (such as steam)" in Game Capture is different: it controls whether in-game overlays like Steam's appear in the capture, and has nothing to do with your stream overlay.
Is the overlay off the canvas or scaled to zero?
If the source is selected but you see no red bounding box in the preview, it may have been moved outside the canvas or shrunk to nothing.
- Right-click the source and choose Transform > Reset Transform (Ctrl+R on Windows).
- For full-screen overlays, then choose Transform > Fit to screen (Ctrl+F on Windows).
- Check your canvas size in Settings > Video > Base (Canvas) Resolution. Overlays built for 1920 x 1080 line up correctly on a 1920 x 1080 canvas.
OBS browser source not showing: how to fix it
StreamElements, Streamlabs and most web-based widgets load through a Browser source. When the page does not load or loads at the wrong size, the overlay looks missing even though the source is there.
1. Use the right URL
Copy the overlay or widget link from your dashboard (StreamElements and Streamlabs both give you a dedicated overlay URL). Pasting the address of the editor page you are logged into will not work. Paste the link into the URL field with no spaces before or after it.
2. Match the width and height
A new browser source defaults to 800 x 600, according to the OBS Browser Source documentation. Most overlays are designed on a 1920 x 1080 canvas, so at 800 x 600 elements placed on the right or bottom of the design fall outside the visible area. Set Width to 1920 and Height to 1080 unless the widget says otherwise.
3. Refresh the cache
After you edit an overlay online, OBS can keep showing the old version. Open the source properties and click Refresh cache of current page. You can also tick Refresh browser source when scene becomes active so it reloads every time you switch to that scene.
4. Turn off "Shutdown source when not visible"
With this option on, OBS unloads the page whenever the source is hidden or its scene is not active. For alerts that need to stay connected, leave it off.
5. Toggle browser hardware acceleration
If browser sources are blank or flicker across the board, go to Settings > Advanced > Sources and toggle Enable Browser Source Hardware Acceleration, then restart OBS. Turning it off fixes blank sources on some systems but can raise CPU use, so test both states.
6. Check the default Custom CSS
The default Custom CSS in a browser source makes the page background transparent. If you deleted it, the page's own background (often white or black) covers everything under it. Restore this line if it is missing:
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
StreamElements or Streamlabs overlay not showing in OBS
When a StreamElements or Streamlabs overlay is not showing in OBS, work through the browser source fixes above first, then check these platform-specific points:
- Size matches the editor: keep the browser source at the same resolution as the overlay canvas in the StreamElements editor, which is 1920 x 1080 by default.
- Trigger a test: alerts are invisible until an event fires. In StreamElements, use the Emulate option in the overlay editor. In Streamlabs, use the test buttons on the Alert Box widget page. If the test appears in the editor but not in OBS, the problem is the browser source.
- Restart OBS: if a widget stopped updating and refreshing the cache did nothing, a full OBS restart reconnects it.
- Put alerts on top: keep the alert browser source at the top of the Sources list so nothing covers it.
Chat overlay not showing in OBS
A chat box is empty until someone types, so a brand-new chat overlay often looks broken when it is working fine. Send a message in your own chat and watch the preview.
- Make sure the chat widget is connected to the right platform account in your StreamElements or Streamlabs dashboard.
- Many chat widgets hide messages after a set time. If messages flash and vanish, look for a "hide message after" or similar option in the widget settings.
- If you capture a pop-out chat window with Window Capture instead of a browser source, the window must not be minimized. A browser source with the widget URL is more reliable.
Why does my overlay have a black background in OBS?
A black or white box around your overlay means the file or page has no transparency information, so OBS shows the background as solid color.
| Format | Supports transparency in OBS? | Use it for |
|---|---|---|
| PNG | Yes | Static frames, panels, labels |
| GIF | Yes (on/off only, no soft edges) | Simple animations |
| WebM (VP8/VP9 with alpha channel) | Yes | Animated frames, alerts, stingers |
| MP4 (H.264) | No | Full-screen scenes with no transparency |
| JPG | No | Full-screen backgrounds only |
If a WebM still shows black, it was probably exported without an alpha channel. Re-export it from your editor with alpha enabled, or ask the creator for the transparent version. An MP4 cannot be made transparent in OBS without a chroma key, which usually leaves rough edges.
For a full walkthrough of placing a transparent frame around your camera, see our guide on how to add a webcam overlay to OBS.
Animated overlay plays once and then disappears
Animated overlays added as a Media Source play one time by default. When playback ends, the source shows nothing.
- Double-click the media source to open its properties.
- Make sure Local File is checked and the file path is correct.
- Tick Loop for frames, backgrounds and screens that should run nonstop.
- Leave Restart playback when source becomes active on for intros, so they start from the beginning each time you switch scenes.
The same settings apply to full-screen scenes. Our guides on adding a BRB screen in OBS and a starting soon screen cover them step by step.
Overlay disappeared after moving files or reinstalling OBS
Image and media sources point to a file path on your computer. If you move, rename or delete the overlay folder, the source stays in the list but shows nothing. OBS may also show a Missing Files window when it loads your scene collection.
- Keep all overlay files in one permanent folder (for example
Documents/Stream Overlays) before you add them. - Open each broken source and click Browse to select the file in its new location.
- Before reinstalling or switching PCs, export your setup with Scene Collection > Export and copy the overlay folder along with it.
Still not working? Rule out the overlay itself
If none of the fixes above work, test the overlay outside your current setup. Create a new empty scene, add only the overlay, and check the preview. If it shows there, something in your original scene (order, filters or a covering source) is the issue. If it still does not show, open the file in your browser or video player: a file that will not play anywhere is damaged or incomplete, so download it again.
When you are ready to replace a broken or low-quality overlay, a pack built for OBS saves a lot of this troubleshooting. Our Purple Neon animated overlay pack, for example, includes animated screens, webcam frames in 16:9, 9:16 and 4:3, 12 animated alerts, a chat box and stinger transitions, and works with OBS Studio, Streamlabs and StreamElements. You can browse every theme in all stream overlays, or test your setup first with a free stream overlay.
FAQ
Why is my overlay not working in OBS after an update?
Updates sometimes reset browser source behavior or hardware acceleration. Refresh the cache on each browser source, toggle Enable Browser Source Hardware Acceleration under Settings > Advanced, and restart OBS. If only one overlay broke, delete and re-add that source.
Why can't my viewers see my overlay when I can see it in OBS?
Check whether you are in Studio Mode: the preview on the left is not live until you click Transition. Also confirm you are streaming the scene that contains the overlay, and that you are not streaming from a different app or scene collection than the one you are editing.
Why are my alerts not showing in OBS but I can hear them?
Sound with no visual usually points to the browser source size, position or rendering. Set the source to 1920 x 1080, move it to the top of the Sources list, and try toggling browser source hardware acceleration. Then send a test alert from your alert dashboard.
Do OBS overlays show on my screen while I play?
No. OBS adds overlays only to what it records and streams. To see what viewers see, open a Windowed Projector from the preview or watch your stream on another device.
What file format should a transparent overlay be?
Use PNG for static overlays and WebM with an alpha channel for animated ones. MP4 and JPG files do not carry transparency in OBS, so they show a solid background.
