How to Add a Webcam Overlay in OBS (Frames, WEBM & Green Screen)

Your webcam is the most-watched part of your stream — it's the one source viewers' eyes keep coming back to. So a bare, rectangular camera feed floating in the corner is a missed opportunity. A webcam overlay (a frame or border around your facecam) is one of the fastest ways to make your channel look intentional instead of thrown together.

The good news: adding one in OBS takes about five minutes, and you don't need any design skills. This guide walks through it step by step — the exact OBS settings, how animated borders work, the green-screen option, free sources, and the camera settings that actually matter.

What is a webcam overlay?

A webcam overlay is a graphic that sits around (or over) your camera feed — usually a frame, border, or themed shape that matches the rest of your stream. People call it a few different things: a webcam frame, a facecam border, a camera frame overlay. They all mean the same thing.

There are two kinds you'll run into:

• Static webcam borders — a simple PNG image with a transparent center. Lightweight, no animation.
• Animated webcam borders — a looping video (usually a WEBM file with alpha transparency) with subtle motion: a glowing edge, drifting particles, a pulsing neon outline.

Why bother? Three quick reasons. It makes your facecam look like part of a designed layout instead of a random box. It hides the hard rectangular edge of your camera, which always looks amateur. And it ties your webcam into your branding, so your screens, alerts, panels and cam all feel like one set. That cohesion is exactly what separates a channel that looks "new" from one that looks established.

How to add a webcam overlay in OBS

Here's the part that trips people up: the order of your sources matters. OBS renders from the bottom up, so whatever sits higher in the Sources list appears on top. Your camera goes on the bottom, your frame goes on top.

Step by step:

1. In the Sources panel, click the + button and choose Video Capture Device. Name it "Webcam", pick your camera from the dropdown, and click OK. This is your base layer.
2. Click + again and choose Media Source (for an animated WEBM border) or Image (for a static PNG). Name it "Webcam Frame".
3. For a Media Source, click Browse and select your .webm file, then tick Loop so it plays continuously. Click OK.
4. In the Sources list, make sure the frame sits above the Video Capture Device — drag it up if needed.
5. Select the frame in the preview and drag it so its transparent opening lines up with your camera feed. If the sizes don't match, right-click the source and use Transform → Edit Transform to set the position and size exactly.

That's it — your camera now sits neatly inside the frame. One tip: if you need to crop your camera feed to fit (for example, to make it square), hold Alt while dragging the red handles on the source. Alt-dragging crops instead of stretching, so your face doesn't get squished.

Animated webcam borders and WEBM alpha

If you want movement — a glowing edge, floating sparks, a neon pulse — you'll be using an animated webcam border, and the format that makes it work cleanly is WEBM with an alpha channel.

Here's why WEBM alpha matters: it carries true transparency inside the video file itself. That means the center (where your face goes) and the area around the frame are genuinely see-through, with no background box. You drop it in as a Media Source and it just works — no chroma key, no plugins, no extra CPU load from a browser source. For a single moving overlay, it's the cleanest option there is.

A common mistake is grabbing an MP4 instead of a WEBM. MP4 doesn't support transparency, so you'll end up with an ugly black or white box around your frame. If your animated border shows a solid background, that's almost always the problem — you've got the wrong file format. Look for files labelled WEBM or "alpha" / "transparent".

Using a green screen with your webcam border

If you don't have a transparent webcam feed and you want your whole body (not a boxed-in head) inside a themed border, that's where a green screen comes in. OBS has this built in — no plugins needed.

1. Right-click your Video Capture Device and choose Filters.
2. Under Effect Filters, click + and add Chroma Key.
3. Set Key Color Type to Green (or Blue, if that's your screen).
4. Adjust the Similarity slider until the green disappears — somewhere around 500–600 is a good starting range if green is still bleeding through.
5. Tweak Smoothness for the edges (too high gets blurry, too low gets harsh), and use Key Color Spill Reduction to kill green reflections on your skin and hair.

A couple of real-world tips that make a bigger difference than the settings: light your green screen evenly from both sides — uneven lighting is the number-one reason chroma key looks bad. And don't wear anything green or shiny, or parts of you will turn transparent. If one Chroma Key filter can't catch every shade of green, you can stack a second Chroma Key filter to clean up the rest.

Webcam size and settings that actually matter

You don't need a 4K cinema setup. For most streamers, 720p at 30fps is the sweet spot for a webcam. Your camera usually takes up only 15–25% of the screen, so the quality difference between 720p and 1080p is barely visible to viewers — and 720p30 leaves more CPU and bandwidth for your game capture.

30fps is plenty for a webcam. Jumping to 60fps adds real CPU and bandwidth cost for a tiny visual gain. The only time 60fps is worth it is full-screen facecam content — Just Chatting, IRL, reaction streams — where the camera is the show.

For positioning, keep your facecam where it won't cover important game UI (minimaps, health bars, ability cooldowns). Bottom-left and bottom-right corners are the classics for a reason. And once it's framed and placed, lock the source (the little padlock in the Sources list) so you don't accidentally drag it mid-stream.

Free webcam overlay options

You don't have to spend anything to get started. There are plenty of free animated webcam overlays and static borders floating around, and they're a perfectly good way to test the look before you commit to a full themed setup.

The catch with free webcam frames is the same as with any free overlay: they rarely match the rest of your stream. You'll end up with a neon cam border, a totally different alert style, and panels in a third look — which is exactly the mismatched feeling a good overlay is supposed to fix. A free frame solves one box; it doesn't give you a cohesive channel.

If you want to try a matching look without spending anything yet, grab a free overlay pack — it includes a webcam frame designed to sit inside a full set, so you can see how a cohesive cam border feels on your own stream.

Get a webcam border that matches your whole stream

A webcam overlay is one of the quickest wins for a more professional-looking channel — and the free frames will get you most of the way there. But the real upgrade is when your cam border isn't a one-off: it's part of a set where your screens, alerts, chat box, panels and webcam frame all share the same style.

That's what every NeonStreamLab pack includes — an animated webcam frame (WEBM alpha, drop-in ready) that matches the rest of the overlay, in dozens of themes. A few examples:

• The Futuristic cyberpunk pack — a glowing neon cam border for high-energy gaming.
• The Lofi Cafe pack — a soft, cozy frame for chill and just-chatting streams.

Once your webcam is sorted, the next quick win is your chat — here's how to add a chat overlay in OBS the same way. Or browse all our webcam overlays and find the frame that already feels like your channel.