Guides / How to Add a Twitch Overlay to OBS (2026 Guide)
How to Add a Twitch Overlay to OBS (2026 Guide)
Updated 2026-11-05 · 7 min read
An overlay is the layer between your gameplay and your viewers: webcam frame, chat box, name plate, goal bar and alerts. In OBS Studio you can add one in two ways — as a static PNG or as a browser source that updates live.
This guide covers both, plus the sizing and layer-order mistakes that make overlays look blurry or cover the game HUD.
Option 1: add a transparent PNG
A PNG never changes. If you edit the design later, export a new file and replace the image source.
- Open the OverlayForge editor and pick a style. Set the canvas to 1920×1080 for Twitch/YouTube or 1080×1920 for vertical.
- Click Download PNG. The file has a transparent background everywhere except the frame, panels and bar.
- In OBS, select your scene and click + under Sources → Image.
- Choose the PNG and click OK. Drag it to the top of the source list so it sits above the game capture.
Option 2: add a live browser source
Browser sources redraw the exact scene from the cloud, so a change in the editor appears after you refresh the source (right-click → Refresh).
- In the editor, click Publish overlay URL. Copy the URL that appears.
- In OBS click + under Sources → Browser.
- Paste the URL, set Width to 1920 and Height to 1080, and leave “Shutdown source when not visible” off.
- Put the browser source above the game capture and below any alert box you want on top.
Sizing and safe margins
Use the same canvas as your stream output. If your OBS canvas is 1920×1080, the overlay should also be 1920×1080; scaling a 1080p overlay to 1440p makes text soft.
Keep critical text at least 5% away from every edge — about 96px horizontally and 54px vertically at 1080p. Streaming platforms and TV apps crop edges more aggressively than the desktop player.
| Canvas | Overlay size | Safe margin |
|---|---|---|
| 1920×1080 (Twitch, YouTube) | 1920×1080 | 96px / 54px |
| 1080×1920 (Kick, TikTok Live) | 1080×1920 | 54px / 96px |
| 2560×1440 | 2560×1440 | 128px / 72px |
Layer order that works
- Game capture → webcam → overlay frame → chat → alerts → notifications.
- Keep the overlay above the webcam so the frame crops it cleanly.
- Put browser-source alert boxes above the overlay, otherwise a new follower alert hides behind the frame.
Troubleshooting
- Overlay is black: the browser source is probably 1920×1080 but your scene is vertical. Match the canvas.
- Text looks blurry: the source is scaled. Right-click → Transform → Reset Transform, then resize the canvas instead.
- Chat is empty: pass your channel in the URL, e.g. /o/<token>?channel=yourlogin.
- Nothing updates: right-click the browser source → Refresh, and check the overlay is published (not just saved).
FAQ
Do I need Photoshop for a Twitch overlay?
No. A parametric editor can produce a clean frame, panels and name plate without layered design files.
Is a PNG or a browser source better?
PNG is lighter and works everywhere. A browser source is better when you want to change the design without re-exporting, or want live chat and labels.
What size should a Twitch overlay be?
1920×1080 for a standard Twitch canvas; 1080×1920 for vertical Kick or TikTok Live.
Can I use the same overlay on Kick and YouTube?
Yes. The overlay is platform-agnostic; only the canvas ratio changes.