How to Make Stream Overlays for Free: A 2026 Guide

Key points

• A full stream overlay set can be built for free with Photopea or Canva plus OBS Studio.
• Static overlays export best as PNG-24 with an alpha channel at 1920×1080; JPEG cannot store transparency.
• Animated overlays work free as WebM with alpha or as an HTML/CSS browser source in OBS.
• Keep the bottom 320 pixels of the canvas clear for webcam and chat sources.
• Check the licence of any free overlay pack before monetising the channel that uses it.

How do you make stream overlays for free?

You can build a complete stream overlay set — webcam frame, chat box, alert background, and panels — for free using a browser editor such as Photopea or Canva's free tier, then compositing the exported files in OBS Studio. Nothing in that workflow requires a paid subscription.

The short version runs five steps: create a 1920×1080 canvas with a transparent background; draw your frame with a rounded rectangle and a 6–8 px stroke; put all text on its own layer; export as PNG with an alpha channel; then add the file in OBS as an Image source and drag it above your game capture.

Overlays are mostly shapes, text, and transparency rather than photo retouching, which is exactly the kind of work free editors handle well. The paid tools save time, not capability.

Pick canvas size and leave safe zones

Match your OBS canvas: 1920×1080 is the default and the safest baseline, while 2560×1440 suits 1440p streamers. Viewers on 1280×720 see the same layout scaled down, so nothing important should sit in the outer 5% of the frame — some platforms crop edges when videos are re-posted.

Reserve roughly 320×320 px in the bottom-left for your webcam and the same bottom-right for chat. Keep the top strip clear for alert pop-ups so they never cover gameplay-critical UI like health bars or ammo counters.

Export each element as a separate file rather than one flattened image. That way you can nudge the chat box in OBS without reopening the editor. Use PNG-24 with an alpha channel; JPEG cannot store transparency and will leave a solid rectangle behind your frame. A simple 1080p frame usually lands between 50 KB and 300 KB. If you need a second size, resize the export rather than stretching a screenshot — the Free Online Photo Resize Tool handles that in the browser.

Which free tools export real transparency?

Photopea runs entirely in a browser, opens and saves PSD files, and exports PNG and WebP with alpha; it is free and ad-supported. Canva's free tier also exports PNG with a transparent background, but the background remover and many decorative elements sit behind Canva Pro, so plan around that.

For desktop work, GIMP and Krita are free and open source, and Inkscape is the better choice for vector panels you want to rescale without quality loss. OBS Studio itself is free and open source (OBS Studio), and the PNG format's alpha channel is what makes the whole transparent-overlay trick work (PNG specification overview).

StreamElements and Streamlabs both offer free overlay builders with ready-made assets. They are genuinely fast, but customisation is limited to the options the builder exposes, and the licence attached to each asset varies. Read the pack's terms before you assume you can resell or redistribute it.

Animate overlays with CSS or WebM

MP4 does not carry an alpha channel, so it cannot produce a transparent animated overlay. The two free routes are WebM video with alpha (VP8 or VP9) played through an OBS Media Source, or a browser source running HTML and CSS with a transparent body background.

The browser-source route is the more flexible one. Write a small index.html file with a CSS keyframe animation, point OBS at the local file, set the source to 1920×1080, and it renders live over your game. The Canvas API covers particle effects and progress bars if you want to go further than CSS transitions.

Avoid animated GIF for anything with curved edges: GIF transparency is one bit per pixel, so anti-aliased corners turn jagged and the palette caps at 256 colours. If a WebM loop file gets heavy after exporting, compress it first with Compress Video Online Under 10mb — then re-check the alpha edges, because aggressive compression can soften them.

Name files so scenes stay fixable

Adopt a numbering scheme from day one: 01_webcam_frame_1080p.png, 02_chat_box_1080p.png, 03_alert_bg.webm. Prefix numbers force alphabetical order in OBS's file picker, which matters once a scene has fifteen sources. Keep the layered master file (PSD, KRA, or SVG) and export copies from it — never edit the PNG.

Overlay packs often arrive with names like final_v2_REAL.png, which makes troubleshooting slow. A batch renamer fixes that in one pass; Bulk File Renamer does it without installing anything. Keep one folder per scene collection so you can back it up by copying a single directory.

For quick resizing, renaming, or format conversion between exports, OnlineFree.app runs free browser-based tools with no sign-up required — useful when you are fixing a layout five minutes before going live.

Are free stream overlays good enough to use?

For most channels, yes. A clean frame, readable chat box, and consistent colour scheme matter more to viewers than whether the art was commissioned. The honest limitation is distinctiveness: popular free packs appear on thousands of channels, so your layout can look familiar to regular viewers of other streams. Drawing your own in Photopea or Krita solves that at the cost of time.

Licensing is the bigger risk. Many free packs permit monetised streaming but forbid reselling the files, redistributing them, or claiming authorship, and some require on-stream credit. Assets you draw yourself carry no third-party licence at all — though any fonts, stock images, or icons you drop in keep their own terms, so check each one.

Treat any summary of a licence, including this one, as a starting point rather than legal advice. If your channel earns money, read the actual licence text and keep a record of where each asset came from.

Frequently asked questions

Can I make stream overlays for free without Photoshop?

Yes. Browser editors like Photopea and Canva's free tier export transparent PNGs, and GIMP, Krita, and Inkscape are free desktop downloads. OBS Studio then composites those files over your gameplay. Photoshop is convenient, not required, because overlays are mostly shapes, text, and transparency rather than photo retouching.

What file format should free stream overlays use?

Use PNG-24 with an alpha channel for static overlays, because it preserves smooth semi-transparent edges. For animation, use WebM with alpha played through an OBS Media Source, or an HTML/CSS browser source. JPEG cannot store transparency, so it leaves a solid rectangle behind your frame.

How do I add a free overlay to OBS Studio?

In OBS, add an Image source for PNGs or a Media Source for WebM, select your file, then drag the source above your game capture in the Sources list. Set the canvas to 1920×1080 and lock the source so it cannot be nudged accidentally. OBS scales overlays down automatically for 1280×720 streams.

Do free stream overlays come with a commercial licence?

Not always. Many free packs allow monetised streaming but prohibit reselling or redistributing the files, and a few require attribution in your channel description. Overlays you draw yourself in Photopea, GIMP, or Krita carry no third-party licence, which is the simplest option if you sell merchandise or run paid ads.

How long does it take to build a free overlay set?

A basic set — webcam frame, chat box, alert background, and three panels — takes most people two to four hours the first time in Photopea or Canva. Reusing one template and changing only colours and text brings later sets under an hour. Animated browser-source overlays add extra time for CSS tuning and testing.

References

• OBS Studio · obsproject.com
• PNG specification overview · en.wikipedia.org
• Canvas API · developer.mozilla.org