How to Make a Free Twitch Overlay: Step-by-Step
Reviewed by the OnlineFree.app team · Updated
Key points
- Free Online Twitch Overlay Maker exports a transparent 1920×1080 PNG you add to OBS as an Image source.
- The builder needs no account, adds no watermark, and never uploads your logo or overlay to a server.
- Four presets cover webcam-plus-chat, full-frame border, top-bar ticker and panels-only scenes.
- Panel opacity and accent color change readability over gameplay more than any other setting.
- The PNG is a static frame: live chat and alerts need separate widget sources behind it.
What the tool actually outputs
Free Online Twitch Overlay Maker exports one transparent PNG at 1920×1080 that you add to OBS Studio as an Image source — with no account, no watermark, and no upload to a server.
Everything happens in your browser tab. The preview is a canvas painted on your own machine, the optional logo is read with FileReader instead of being sent anywhere, and the download is produced by canvas.toBlob('image/png'). Close the tab and nothing of yours is left behind, which is why Free Online Twitch Overlay Maker can run without a signup.
Behind the overlay sits a checkerboard, so transparent areas read as transparent rather than white. That detail matters: a PNG with a solid background would black out your gameplay the moment you dropped it into a scene.
Step by step: from blank page to PNG
Open the page and you already have a usable default: the webcam-chat-right layout, 1920×1080, accent #7E22CE, panel opacity at 55% and the placeholder text @yourchannel. If that is close enough for tonight, one click on Download finishes the job.
To make it yours, work down the left column in order. Pick one of four layouts, confirm the canvas size, set the accent color, drag the panel opacity slider, type your channel name (32 characters maximum), and optionally add a logo up to 2MB in PNG, JPG or SVG. The preview repaints instantly beside the controls, so you judge every change against the checkerboard.
Export last. The sticky Download button renders the PNG at whichever resolution is selected, so switch from 1280×720 to 1920×1080 before downloading if you stream at 1080p — resizing the file afterwards softens borders and small text.
Which of the four layouts fits your scene?
webcam-chat-right places a webcam frame on one side and a chat panel on the other, with gameplay visible between them. It is the safest default for a face-cam stream that also shows chat on screen.
full-frame-border draws a slim border around the entire 1920×1080 scene and leaves the middle open. Choose it when the game should stay visible edge to edge but the frame needs defined edges.
topbar-ticker adds a bar along the top and a ticker along the bottom — the only layout where your channel text appears twice. panels-only gives you boxes alone: webcam frame, chat box and alert panel, with no border and no bar, which suits streamers who already have branded framing. Twitch's Creator Camp covers overlay basics if you want a second opinion on scene design.
Colors, opacity and channel text
Panel opacity is the most consequential setting. At the 55% default, panels tint the gameplay behind them, so text stays readable without hiding the action. Push it toward 100 and the panels become near-solid blocks that cover a chunk of your scene; drop it to 0 and they vanish entirely, leaving only borders and labels, with your chat widget floating over raw gameplay.
The accent color drives borders, labels and the alert frame, so one change recolors the whole design. Pick something that contrasts with the games you play most, not with your logo — a plum accent on a purple-heavy game disappears.
Channel text is capped at 32 characters and renders in the top bar or bottom ticker, depending on layout. Keep it to your handle; long strings shrink fast across 1920 pixels, and small text is the first thing to smear at typical streaming bitrates.
Add the PNG to OBS as an Image source
In OBS Studio, add the downloaded file as a new Image source, then set its position to 0,0 and its size to the canvas you exported — 1920×1080 or 1280×720. If the size does not match exactly, the overlay stretches and the border thickness looks uneven from side to side.
Layer order does the real work. The overlay belongs above your game capture and display capture, but below your webcam and your chat widget, so those live elements appear inside the frames you drew. Lock the source afterwards so a stray drag mid-stream cannot shift it.
The builder renders at 1920×1080 or 1280×720 only, as of 2026. Scaling the PNG down inside OBS stays crisp; scaling it up to a 1440p or 4K canvas makes fine borders and small labels look soft.
What a static overlay PNG cannot do
The downloaded file is a still image. The chat box, alert panel and ticker are empty frames — they do not fetch messages or fire alerts on their own.
To get live chat, add a chat widget source and size it to sit inside your chat panel; for alerts, add an alert-box source inside the alert frame. Because those live sources sit above the PNG in the layer list, the frame reads as a window onto real content.
Be realistic about scope too. This is one overlay graphic, not a full stream package: no animated stingers, no scene transitions and no per-game variants. If you need several looks, generate one PNG per layout and keep each as its own OBS scene. Before any important stream, record a two-minute test clip and check transparency and text legibility yourself — OnlineFree.app hosts this and other free browser tools, but the final check is always your own recording.
Frequently asked questions
Is Free Online Twitch Overlay Maker really free and watermark-free?
Yes. Free Online Twitch Overlay Maker renders the PNG locally in your browser and adds no watermark, badge or attribution to the file. There is no account and no export limit built into the tool. Because rendering happens on your own device, your only practical cost is loading the page.
Does the tool upload my logo or overlay to a server?
No. The logo is read locally with FileReader and drawn onto the canvas in your browser, and the finished file is created with canvas.toBlob('image/png') on your machine. Nothing is sent to a server, which is exactly why no signup is required. On a shared computer, close the tab when you finish.
What resolution should I export for Twitch?
Export 1920×1080 if you stream at 1080p, or 1280×720 if you stream at 720p or want a smaller file. The PNG should match your OBS canvas size exactly. A 1920×1080 overlay scaled down in OBS stays sharp, while scaling one up makes borders and small labels blurry.
Can I use the overlay PNG in OBS Studio?
Yes. In OBS Studio, add an Image source, select your downloaded PNG, set position to 0,0 and size to your canvas of 1920×1080 or 1280×720. Place it above game capture and below webcam and chat sources, then lock the source so it cannot be moved accidentally during a broadcast.
Will the overlay show live chat and alerts automatically?
No. The export is a static PNG, so chat and alert panels are empty frames. You still need a chat widget and an alert service layered inside them in OBS. Since those live sources render above the PNG, they appear framed by the overlay panels rather than replacing them.