If you use StreamElements, you've got one of the most powerful overlay systems out there — but the editor can feel confusing the first time you open it. Where do overlays live? How do you get your own design in? And how does it actually show up in OBS? This guide clears all of that up.
By the end you'll know how to build a StreamElements overlay, drop your own custom graphics into it, and connect it to OBS in a few clicks. It takes about ten minutes, and you only have to set it up once.
What are StreamElements overlays?
A StreamElements overlay is a layout you build inside StreamElements' web-based overlay editor, then display on your stream through a single link. Instead of adding ten separate sources in OBS, you build everything — your screens, alerts, webcam frame, chat box and panels — into one overlay, and OBS pulls it in as one browser source.
That's the big idea: StreamElements does the heavy lifting in the cloud, and OBS just shows the result. The upside is that your alerts, chat and widgets are all wired up and controllable from your dashboard. The trade-off is that, because it's a browser source, it depends on your internet and StreamElements' servers — something to keep in mind, which we'll come back to.
How to add an overlay in the StreamElements editor
Everything starts in the overlay editor. Here's the exact path:
- Log in to your StreamElements dashboard.
- In the sidebar, go to Streaming Tools → Overlays.
- Click New Overlay.
- Set the resolution to 1080p from the dropdown and click Start. (Match this to your stream's canvas — almost always 1920×1080.)
You're now in the editor with a blank canvas. To add something, click Add Widget and pick what you need — a static image, a video, an alert box, a chat box, and so on. Each thing you add becomes a layer, and you'll see them stacked in the layer list on the left. Rename your layers something clear like "Webcam Border" or "Starting Soon" so you don't lose track — it makes a huge difference once you have several elements.
Adding your own custom overlay
Here's the part most guides skip: you don't have to use StreamElements' default graphics. You can bring in your own overlay design — a themed webcam frame, a custom screen, your own panels.
To add your own artwork as a layer:
- In the editor, click Add Widget → Static/Custom → Image (or Video for an animated WEBM/MP4 element).
- Upload your file — a transparent PNG for a static frame, or a WEBM/MP4 for animated motion.
- Position and resize it on the canvas so it sits exactly where you want.
- Rename the layer in the left-hand list so it's easy to find later.
Build up your scene this way — your webcam frame, your chat box, your alerts — and you've got a complete custom overlay living in StreamElements. If you grabbed an asset from the StreamElements gallery instead, just click CREATE on it, then GO TO MY OVERLAYS, and it lands in your My Overlays section ready to edit.
Connecting your StreamElements overlay to OBS
Once your overlay looks right, you push it to OBS with a single URL — no file exporting, no re-uploading.
In StreamElements:
- In the overlay editor, hover the link icon in the top-right and click it to copy the overlay URL to your clipboard.
In OBS:
- Click the + in the Sources panel and choose Browser.
- Give it a name and paste the StreamElements URL you copied.
- Set the Width and Height to match your overlay — 1920 and 1080 for a 1080p overlay.
- Tick Shutdown source when not active and Refresh browser when scene becomes active. These two keep your alerts and widgets behaving correctly and stop them eating resources when you're not on that scene.
Click OK and your whole StreamElements overlay appears in OBS at once. Any change you make in the StreamElements editor updates live — no need to touch OBS again.
Free StreamElements overlays vs a matching set
StreamElements has a big gallery of free overlays, and they're a perfectly good place to start. You can browse, click CREATE, and have something on screen in minutes without spending anything.
The catch is the usual one: free StreamElements overlays rarely match each other or your branding. You might love one chat box, a different alert style, and a webcam frame from a third designer — and the result looks pieced together rather than designed. A free overlay solves one box; it doesn't give you a cohesive channel.
If you want a matching look without spending anything yet, grab a free overlay pack — it's a complete set (screen, webcam frame, alerts, panels) designed together, so you can drop it into StreamElements and see how a cohesive overlay feels.
A quick note: StreamElements vs OBS-only
You don't have to route everything through StreamElements. For a single static or animated piece — like just a webcam frame — adding it directly in OBS as a Media Source (WEBM alpha) or Image is more reliable, because it runs locally with no internet dependency.
The sweet spot for most streamers is a mix: use StreamElements for the things it does best (alerts, chat, anything dynamic), and add your static and animated overlay pieces straight into OBS where stability matters. Our guides on how to add a webcam overlay in OBS and how to make a starting soon screen walk through the OBS-direct method step by step.
Get a StreamElements-ready overlay set
A StreamElements overlay is one of the quickest ways to a professional-looking stream — and the free gallery will get you going. But the real upgrade is a set where your screens, alerts, chat box, webcam frame and panels all share one style and snap straight into the editor.
That's what every NeonStreamLab pack includes — a full, matching overlay set ready for StreamElements, OBS or Streamlabs, in dozens of themes. Once it's set up, the next quick win is your chat: here's how to add a chat overlay in OBS the same way. Or browse the overlay packs and find a style that already feels like your channel.
