A stream overlay maker that gives you a real transparent PNG
A stream overlay is a picture that sits on top of your game and webcam: a frame around your face, a chat panel, a name tag, a bar along the bottom. This stream overlay maker lets you lay those pieces out on a 1920 × 1080 canvas and download them as one transparent PNG. The webcam and game frames are true cut-outs, so the inside of each frame has no pixels at all and your camera and gameplay show straight through.
Pick one of four original layouts (gameplay with a webcam corner, just chatting, two webcams, minimal circle cam), change colours, fonts and corner shapes, drag pieces around and export at 1920 × 1080, 1280 × 720 or 2560 × 1440. Nothing is uploaded: the image is drawn and saved in your browser, and the fonts are the ones already on your computer, so no font files are fetched.
How to use the Stream Overlay Maker
- Choose a layout and an export size that matches your canvas in your streaming software.
- Set the accent, panel and text colours, a system font, the border width and the corner radius.
- Drag elements on the preview, or select one and type exact X, Y, width and height values. Edit the text of labels, panels and bars.
- Use the “Add” buttons for more webcam frames, panels, labels, bars or free text; duplicate or remove what you do not need.
- Press Download transparent PNG. In your streaming software add it as an image source above your game and camera.
Stream Overlay Maker features
True transparent cut-outs
Webcam and game frames punch a hole through everything listed before them, including panels and bars, so nothing hides your camera.
Exact stream sizes
1920 × 1080, 1280 × 720 and 2560 × 1440, all 16:9. Positions are stored on a 1920 × 1080 grid and scale cleanly.
Original layouts
The four starting layouts are drawn by this tool from plain shapes and text, so there is no third-party artwork to worry about.
Browser-source file
Optionally download a self-contained HTML file (still, fade-in, or a slow glow pulse) and load it as a local-file browser source.
System fonts only
Five font stacks that every computer already has, so the exported image looks the same everywhere and nothing is downloaded.
Private
No account, no upload, no watermark.
Stream overlay size: which one to pick
Streaming platforms show video in 16:9. Match your overlay to the canvas (base resolution) you set in your streaming software; if the sizes differ the software scales the image.
| Canvas | Pixels | When to use it |
|---|---|---|
| Full HD | 1920 × 1080 | The usual default; best for 1080p streams. |
| HD | 1280 × 720 | Lower-bandwidth or older hardware; a 720p canvas needs a 720p overlay. |
| QHD | 2560 × 1440 | Only if your canvas really is 1440p; the layout and look are identical. |
How to add the overlay in OBS or similar software
In OBS Studio: Sources → + → Image, choose your PNG, then drag it above your game and camera in the source list. For the HTML file use Sources → + → Browser, tick “Local file”, pick the HTML and enter the same width and height as the export. In Streamlabs, XSplit and similar tools the steps are the same: an image layer or a local-file browser layer at the top. Put your webcam source below the overlay and move it so it sits inside the frame; the cut-out lets it show through.
The cut-out is only a transparent hole. If your camera does not line up, resize the webcam source in your streaming software, or change the frame’s X, Y, width and height here and export again.
Worked example: a webcam corner
In the first layout the webcam frame is 480 × 360 pixels at (40, 654), a 4:3 shape that matches most webcams. Its right edge is at x = 520 and its bottom at y = 1014; the name label sits right below at y = 1024, and the chat panel starts at x = 1580. Those numbers keep every element at least 40 pixels from the edges, which stays clear of the overscan some displays still crop. Switch the shape to a circle and the cut-out becomes a 360-pixel circle centred in the same box.
What this tool does not do
- It does not make animated overlays or alerts; the optional HTML file only fades the whole image in or pulses a soft glow.
- It does not connect to any streaming service or read chat. Panels and labels are static text you type.
- It does not draw artwork, mascots or emote art; use an image editor for those and place the PNG above.
Stream Overlay Maker FAQ
What size is a stream overlay?
Most streams use a 1920 × 1080 (16:9) canvas, so make the overlay 1920 × 1080. For a 720p stream use 1280 × 720. This stream overlay maker exports both, plus 2560 × 1440.
Is the PNG really transparent?
Yes. The export keeps an alpha channel. The inside of webcam and game frames has alpha 0, and the space between elements is empty, so only the frames, panels and labels are visible.
Do I need an account or a watermark-free plan?
No. There is no sign-up and no watermark. The overlay is drawn in your browser and nothing is uploaded.
Can I use it with OBS, Streamlabs and other software?
Yes. Any program that can show a PNG or a local HTML file as a layer works. In OBS add an Image source for the PNG or a Browser source with “Local file” for the HTML file.
Why does the HTML file contain the whole image?
So it is one self-contained file with no external links. It embeds the PNG, and the page background is transparent so the browser source stays see-through.
Can I use these overlays commercially?
The layouts are generated by this tool from basic shapes and your own text, so you are free to use what you export. Keep any images or fonts you add yourself within their own licences.