How to Add Overlays to OBS (Free Overlays)

A stream with no overlay is a raw camera feed. A stream with bad OBS overlays has a neon frame covering the minimap. Between the two is what every streamer wants: a clean webcam frame, alerts, chat on screen, and a "starting soon" screen, and OBS Studio does all of it without a plugin.

This guide shows how to add overlays to OBS in all three forms (static images, animated video, and live browser widgets), how to layer and size them, where to get free stream overlays that are actually free, and how to fix the common problems.

OBS Overlays: The Three Kinds

An overlay is any source that sits on top of your main content in an OBS scene. There are three kinds:

• Static images. A transparent PNG: webcam frames, lower thirds, logos, social labels. Added with the Image source.
• Animated video. A short looping clip with transparency. Added with the Media Source, almost always as a WebM with an alpha channel.
• Browser widgets. A web page rendered inside OBS: alerts, chat boxes, goal bars, timers. Added with the Browser source and a URL from the widget service. OBS's own tutorial on alerts and chat boxes says it plainly: "you do NOT require any plugins to use alerts in your stream."

Most finished overlays stack all three. If you are still finding your way around the Scenes and Sources docks, read our OBS Studio beginner's guide first.

File Formats That Work in OBS

OBS lists the supported image types (.bmp, .tga, .png, .jpeg, .jpg, .gif, with alpha "where applicable") and media types (.mp4, .ts, .mov, .flv, .mkv, .avi, .gif, .webm) in its knowledge base. Rule of thumb: if it never moves, PNG. If it moves and needs transparency, WebM. If it changes based on what viewers do, browser widget.

Step 1: Add a Static Overlay (Image Source)

1. In the Scenes dock, select the scene you want to decorate.
2. In the Sources dock, click + and choose Image.
3. Name it ("Webcam frame") and click OK.
4. Click Browse, pick your PNG, and click OK again.
5. Drag the red bounding box into place, or drag a corner handle to resize.

For a full-canvas frame, select the source and press Ctrl+F (fit to screen), which OBS documents in its overview guide alongside Ctrl+S for stretch, Ctrl+D for centre, and Ctrl+R to reset. Then place your camera and game capture below the frame so they show through its cut-outs.

Step 2: Add an Animated Overlay (Media Source)

1. Click + in the Sources dock and choose Media Source.
2. Name it, click OK, then click Browse next to Local File and pick your WebM.
3. Tick Loop. It is off by default, and without it the animation plays once and goes blank, because Show nothing when playback ends is on by default.
4. Leave Restart playback when source becomes active on.
5. Click OK and position the source like any other.

Use hardware decoding when available is off by default and worth switching on for a 1080p animated frame. OBS keeps transparency in a WebM encoded with VP8 or VP9 and an alpha channel, which is why most overlay shops ship WebM.

Step 3: Add an OBS Browser Source Overlay (Alerts, Chat, Widgets)

An OBS browser source overlay powers almost every "live" element on a stream; the browser source is a full Chromium browser rendered inside your scene.

1. In your alert or widget service, copy the overlay URL (Overlay, Widget, or Alert URL depending on the service).
2. In OBS, click + in the Sources dock and choose Browser.
3. Name it ("Alerts", "Chat box") and click OK.
4. Paste the URL into the URL field.
5. Set Width and Height. The 800 by 600 default is wrong for almost everything: use 1920 by 1080 for a full-canvas alert layer and around 400 by 600 for a chat box.
6. Click OK and drag the source where you want it.

Two properties trip people up. Custom CSS ships with a default that makes the page background transparent (body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }); clear it and your widget gets a solid white box. Shutdown source when not visible unloads the page when the scene is inactive, which is good for a chat box and bad for alerts, because an unloaded page cannot queue them.

The URL is a credential: anyone who has it can fire fake alerts on your stream, so keep the properties dialog off camera.

Alerts and a Chat Overlay for OBS as Browser Sources

Alerts

StreamElements and Streamlabs both give you an alert box widget for free: connect your Twitch, YouTube, or Facebook account, customise the alert, copy the widget URL, and add it as a Browser source at canvas size. OWN3D Pro works the same way through its Scene Builder. Test every alert with the service's test button before you go live.

Chat

The quick route is the platform's own pop-out: on Twitch, click the gear icon at the bottom of chat and choose Popout Chat; on YouTube, click the three-dot menu at the top of the live chat panel and choose Popout chat. Paste the new window's URL into a Browser source. Both render with a solid background and show only that platform's chat.

A dedicated chat overlay for OBS is the better route. StreamElements and Streamlabs both include a free Chat Box widget with a transparent background, your choice of font and colours, and a URL you add exactly like the alert box. Nerd or Die, OWN3D, and most overlay shops sell styled chat boxes that work the same way.

Merged chat when you stream to several platforms

If you multistream, one chat box per platform means three boxes fighting for space, and viewers on YouTube never see what Twitch said. Livepush multi-chat pulls messages from YouTube, Facebook, and Twitch into one combined feed and gives you a single URL to add as an OBS Browser source, with font, size, and colour controls so it looks like part of your scene. It needs the platform accounts linked in Livepush (not just stream keys), and Facebook chat requires a paid plan. One rule to respect: Twitch's simulcasting guidelines ask that you do not show a merged multi-platform chat on the Twitch broadcast itself, so read the merged feed on a second monitor and show the merged overlay only on your YouTube, Facebook, and Kick outputs, or use a Twitch-only chat box on the stream everyone sees. Our OBS multistreaming guide covers the setup, and Livepush multistreaming handles the fan-out to 40+ destinations from one OBS stream.

Layering: The Sources Order Is the Z-Order

OBS has no separate layer panel; the Sources list is the layer stack. As the sources guide says, "A Source that is listed above another Source in the list will be on top and might hide what's beneath it." A typical gaming scene, top to bottom: alerts (Browser, 1920x1080), chat box (Browser), overlay frame (Image), webcam, game capture.

Drag sources up and down the list or use the arrow buttons at the bottom of the dock. Once a source is placed, click the padlock icon so you stop dragging your frame by accident; the eye icon hides a source without deleting it. A trick that saves hours: build your overlay elements in their own scene called "Overlay", then add that scene as a source inside each real scene (Sources, +, Scene), so one change applies everywhere.

Sizing to the Canvas

Overlay packs assume a 1920x1080 canvas. Check yours in Settings, Video, Base (Canvas) Resolution. On a 1280x720 canvas a 1080p overlay still fits with Ctrl+F, but its text gets smaller than intended. OBS warns that changing the base resolution later means "you will have to re-align or re-size the sources", so pick your canvas before you decorate it. Our 1080p OBS settings guide covers the canvas and output choices.

Vertical streams are a different canvas entirely: a 1080x1920 canvas for TikTok, Shorts, or Twitch Dual Format needs overlays designed for portrait, not a rotated landscape frame. Our guide to streaming vertical and horizontal simultaneously explains the two-canvas setup, and the aspect ratio guide covers the maths.

Starting Soon, BRB, and Studio Mode

Starting-soon and BRB screens are full-screen scenes you switch to before going live and when you step away. OBS has a BRB screen tutorial using the sources above. The recipe: a Media Source with a looping background video (MP4 is fine here) with Loop ticked, an Image source with your logo PNG on top, and a Browser source with a countdown timer widget (Nerd or Die's Maker, StreamElements, and Streamlabs all have free ones). Switch between scenes with Studio Mode (the button in the Controls dock): the left pane is your preview, the right pane is what viewers see, and Transition swaps them. As OBS puts it, "Viewers cannot see when Studio Mode is enabled or not."

Animated Overlays in OBS and What They Cost

Animated frames look great and cost resources. OBS's encoding performance guide warns that "Using a lot of browser sources in a scene (or scene collection) can use a lot of system resources." In practice: turn on hardware decoding for WebM loops, combine browser widgets where you can (StreamElements' overlay editor puts alerts, labels, and chat into one URL), keep each source's width and height to what you need, and lower the custom frame rate on anything static. If OBS reports rendering lag after you add a pack, the overlay is the likely cause; our dropped frames guide explains how to tell rendering lag from network drops. A static PNG frame costs almost nothing, so if your PC is already working hard, use the PNG version of your frame and spend the animation budget on alerts, which only render when they fire.

Where to Get Free Stream Overlays

All of these were checked in October 2026. The table covers where to get OBS overlays free of charge and what each shop holds back for paid tiers; "free" means no watermark and no trial.

Canva is the best place to design your own frame, but without Pro you cannot export the transparency. StreamElements is the most OBS-friendly hosted option because everything ends up as one URL, while Streamlabs' themes are built for Streamlabs Desktop or its OBS plugin; if you are weighing the two apps, see our OBS vs Streamlabs comparison.

Design Rules That Keep Overlays Out of the Way

• Respect safe zones. Platforms draw their own UI at the edges and across the bottom third on vertical. Keep anything important at least 5% in from each edge.
• Design for a phone. On a mobile screen your 1080p frame is about 400 pixels wide. Use 28px or larger for anything viewers must read.
• Never cover gameplay. No chat box over the minimap, ammo counter, or health bar.
• Less is more. Frame, alerts, chat: three well-placed elements read as professional. Eight animated panels read as a 2014 Twitch stream.
• Match one palette. Two colours plus white across frame, chat, and alerts.

OBS Overlays Not Working: Common Problems

The last tip for OBS overlays: build one scene well, with a frame, an alert layer, and a chat box, and stream with it for a week before adding anything else. Every problem in the table above is easier to spot with three sources than with twelve.