What Is an OBS Browser Source Overlay? How Streamers Add Captions

What Is a Browser Source in OBS

OBS Studio — and its forks like Streamlabs and StreamElements OBS — is built on a plugin architecture that lets you add different types of "sources" to a scene. A browser source is one of those source types. Under the hood, it embeds a lightweight Chromium browser engine directly inside OBS. Instead of capturing your desktop or a webcam, it renders a live URL as a visible layer inside your scene.

The result is a fully functional web page rendered transparently on top of everything else in your stream. The page can contain anything a normal website can: text, animated graphics, real-time data from a server, or interactive elements. Because the browser source supports CSS transparency (background: transparent), you can make the page background invisible so only the content — say, white subtitle text — floats over your game footage.

Browser sources were originally designed for stream alerts (Twitch follower notifications, donation popups), but streamers quickly realized the same mechanism could power live captions, real-time translated subtitles, chat overlays, and custom HUDs. Today it is one of the most powerful and versatile features in OBS.

You add a browser source the same way you add any other source: click the + button in the Sources panel, select Browser, give it a name, and paste in a URL. OBS handles the rest — loading the page, rendering it at the dimensions you specify, and compositing it into the scene at whatever layer position you choose.

How URL-Based Overlays Work

When OBS loads a browser source URL, it opens that page in its embedded Chromium renderer and composites the result into your scene in real time. The key is how the web page on the other end is built.

A well-designed overlay page does a few things:

• Sets body { background: transparent; } so OBS composites only the content pixels, not a solid background
• Opens a persistent real-time connection or Server-Sent Events connection to a backend server
• Listens for incoming data (subtitle text, alert events, etc.) and updates the DOM instantly without a page reload
• Uses CSS transitions for smooth text animations without blocking the render thread

The backend server is where the real work happens. For a subtitle overlay, the server is transcribing your microphone audio via a speech-to-text engine, then pushing the resulting text to every connected browser source client over the real-time connection. The browser source page receives the text and renders it within milliseconds.

From OBS's perspective, it just sees a webpage updating its content. It does not care what the content is — it renders whatever the Chromium engine produces and composites it on top of the scene. This is why the same mechanism works equally well for follower alerts, donation goals, live captions, translated subtitles, and even interactive polls.

How StreamTranslate Uses It

StreamTranslate is built around the OBS browser source model. When you sign up and set up a stream room, StreamTranslate generates a unique overlay URL tied to your account. That URL is the page you paste into OBS as a browser source.

Here is the full flow from your voice to subtitles on screen:

1. You go live. Your microphone audio is captured by StreamTranslate via the browser control panel or a direct audio feed.

2. StreamTranslate's speech-to-text engine transcribes the audio in real time, typically within 500–900 milliseconds of you speaking.

3. If you have translation enabled, the transcript is sent through a neural translation engine and converted to your chosen target language — English, Spanish, Portuguese, Japanese, Korean, and many more.

4. The translated subtitle text is pushed over a real-time connection to your browser source overlay URL.

5. The overlay page renders the text with your chosen styling (font size, color, background pill, position) and OBS composites it transparently over your stream.

6. Viewers watching on Twitch, YouTube, or Kick see the subtitles in real time, right on screen — no viewer-side setup required.

The entire chain — speech to subtitles on screen — takes under one second in optimal network conditions. StreamTranslate lets you customize the overlay appearance from the control panel without touching code: adjust font size, choose text color, toggle background pills, and switch target language on the fly without needing to restart OBS or refresh the browser source.

Setting Width, Height, and FPS

When you add a browser source in OBS, you are prompted to set dimensions and frame rate. Getting these right ensures the overlay fills your canvas correctly and does not introduce unnecessary CPU load.

Recommended settings

• Width: 1920
• Height: 1080
• FPS: 30 (subtitle text does not need 60fps to look smooth)
• Background color: uncheck "Use custom background color" or set alpha to 0

Match these dimensions to your OBS canvas resolution. If your canvas is 1280x720, use 1280x720 for the browser source. If you set the browser source larger than your canvas, OBS will scale it down automatically — wasting memory. If you set it smaller, subtitles may clip at the edges.

Custom CSS in OBS browser source

OBS browser sources include a "Custom CSS" field at the bottom of the properties panel. This CSS is injected into the overlay page on top of whatever styles the page already has. You can use this to tweak positioning or appearance without modifying the overlay URL:

Custom CSS changes take effect immediately after you click OK — no need to refresh the browser source. This is the fastest way to iterate on your overlay style without logging back into the StreamTranslate control panel.

Transparent background

The single most important setting: in OBS browser source properties, scroll down and make sure Use custom background color is unchecked, or set the color's alpha channel to 0. If a background color is set, OBS will paint that color behind the overlay page, blocking your game capture layer. StreamTranslate's overlay page sets body { background: transparent } automatically, but the OBS-level background color overrides it if left enabled.

Browser Source vs Capture Card Overlay

Before browser source overlays became mainstream, streamers who wanted on-screen graphics had two options: software OBS plugins (limited and often unstable) or capture card overlays (hardware-level compositing). Browser sources replaced both for most use cases.

Capture card overlays are still used in broadcast TV production where zero CPU overhead is critical and hardware budgets are high. For the vast majority of streamers — gaming, IRL, podcasting — a browser source overlay is faster to set up, more flexible, and completely free of additional hardware cost.

The only real trade-off is CPU: a browser source spins up a Chromium renderer inside OBS. On a modern CPU it is negligible. On older or underpowered hardware (sub-4-core CPUs), it adds a small but measurable load. Setting the browser source to 24 FPS instead of 30 reduces that overhead by roughly 20% with no visible quality difference for text overlays.

Common Troubleshooting

Browser sources are reliable once configured, but these four issues account for nearly every support request:

Advanced Tips

Dual-language subtitles with multiple browser sources

One of the most compelling use cases for StreamTranslate is running dual-language subtitles simultaneously — for example, English and Spanish at the same time for a bilingual audience. This is straightforward with OBS: add two separate browser source layers to your scene, each pointing to a StreamTranslate overlay URL configured for a different target language. Use Custom CSS on one of them to move the subtitle container to the top of the screen so the two sets of captions do not overlap:

This gives viewers both languages in real time. Pair it with different text colors — white for one language and a yellow or green tint for the other — so viewers can instantly distinguish which line is which without reading both.

Positioning subtitles precisely with CSS

The overlay page uses absolute or fixed positioning for the subtitle container. You can override the exact position using pixel values or percentages in the Custom CSS field without touching the overlay URL:

This is especially useful if your stream layout has a webcam or facecam in the lower portion of the frame — push the subtitles up so they do not cover your face. Adjust the bottom value until the position feels right, then click OK to apply instantly.

Using a browser source across multiple scenes with Scene as Source

If you have three or four scenes in OBS (gameplay scene, intermission, facecam-only, etc.), you do not want to add and individually configure a browser source in every single one. Instead, create a dedicated Subtitles Scene that contains only the browser source. Then, in every other scene, add a "Scene" source pointing to your Subtitles Scene. OBS will composite the subtitles scene contents — including the live browser source — into whatever scene you are on. This means one URL, one configuration, applied consistently everywhere without duplicating settings or risking them getting out of sync.

Hardware acceleration for browser sources

If you have a discrete GPU, enable hardware acceleration in OBS: go to Settings, click Advanced, scroll to "Browser Source Hardware Acceleration" and check the box. This offloads the Chromium rendering to your GPU, freeing CPU cycles for video encoding. On integrated graphics, leave it unchecked — it can sometimes cause the browser source to render incorrectly on lower-end Intel or AMD integrated GPUs where VRAM is shared with system RAM.

Frequently Asked Questions