Guide · 2026-10-13

How to Add an Overlay to OBS (Browser Source, Step by Step)

An overlay in OBS is not an image you import. It is a small web page that OBS draws on top of your scene, called a Browser Source. That is why overlays can animate, scroll chat, count down, or react to events: the page is alive, and OBS just shows it with a transparent background.

This guide covers the whole job: getting an overlay URL, adding the Browser Source with the right settings, putting it in front of your game and webcam, and fixing the problems that trip almost everyone up the first time. It works for any overlay URL, including ones you generate on Sleipnir.

Step 1: Get an overlay URL

An overlay URL looks like a normal web address. On Sleipnir you describe the overlay you want on the Overlays page, check it in the preview, and click Copy next to your overlay URL. The preview shows the overlay on a checkerboard so you can see which parts are transparent.

Every plan includes a monthly allowance of generated overlays, and the countdown, starting soon and lower third widgets are free. The same steps below apply to any URL from any overlay tool.

Treat the URL like a password. Anyone who has it can load your overlay. If it leaks, revoke the overlay on the Overlays page and make a new one.

Step 2: Add the Browser Source in OBS

  • In your scene, find the Sources box and click the + button.
  • Choose Browser, give it a name such as "Webcam frame", and click OK.
  • Paste your overlay URL into the URL box.
  • Set Width to 1920 and Height to 1080. Sleipnir overlays are laid out for a full 1920 by 1080 canvas, so keep this size even if the overlay only fills a corner.
  • Leave Custom CSS at its default: body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }. That line is what makes the background transparent. If you delete it, you may get a solid background.
  • Leave Use custom frame rate off; the source follows your OBS frame rate. If animations look choppy on a 60 FPS canvas (older OBS versions defaulted to 30), tick it and set 60.
  • Leave Control audio via OBS off unless your overlay plays sound.
  • Tick Shutdown source when not visible if you have many scenes and want OBS to stay light. Also tick Refresh browser when scene becomes active if you want the animation to start from the beginning each time the scene appears.
  • Click OK.

Step 3: Put it in front

In the Sources box, the item at the top is drawn in front. Drag your overlay above your game capture and your webcam. Click the lock icon next to it so you do not nudge it by accident.

If your OBS canvas is not 1920 by 1080, keep the source at 1920 by 1080 and press Ctrl+F with the source selected. That is OBS's Fit to screen, and it scales the whole overlay to your canvas without changing its layout.

Step 4: Check it before you go live

The preview in OBS shows the overlay over your scene. If you only see a black or solid box, see the fixes below. You can also paste the URL into any browser tab to check it: the background is transparent, so the tab shows the overlay on white.

Fixes for the usual problems

  • The source is blank. Check that the URL pasted whole, with no spaces at the start or end. Then right-click the source, choose Properties, and press Refresh cache of current page at the bottom. OBS caches pages hard, and this fixes most blank or stale overlays. If it is still blank, the overlay may have been revoked: open the Overlays page and copy the current URL.
  • There is a solid black or white background. The default Custom CSS was changed or removed. Put the default line from Step 2 back.
  • The overlay looks old after you changed it. Press Refresh cache of current page again.
  • The overlay is cut off or too big. The source is not 1920 by 1080. Set Width and Height back, then use Ctrl+F.
  • OBS gets sluggish with many overlays. Turn on Shutdown source when not visible, drop the custom frame rate to 30, and keep the number of full-screen browser sources small.

Going live with the overlay

Once the overlay looks right, stream as usual. If you stream through Sleipnir to Twitch, YouTube and Kick at once, use the connection details from your dashboard. On the Free plan the stream is capped at 5000 kbps, so set Rate Control to CBR and Video Bitrate to 5000 in OBS under Settings, Output. Overlays are drawn inside OBS, so they are part of the one video you send, and every platform gets the same picture.

Where to go next

Make an overlay free → Animated webcam frame guide

← All guides