← All guides

6 min read

Transparent browser overlays in OBS: a practical guide

A transparent webpage lets OBS composite text, counters, chat, and cards over the scene below it. Transparency is simple when every layer agrees, but a page background, custom CSS rule, filter, or premultiplied edge can introduce a black rectangle or colored halo.

Where transparency comes from

The webpage must leave its document and overlay containers transparent. AllStreamTools uses transparent as the default background for generated overlays, while optional solid colors are intended for cards, testing, or chroma-key workflows.

OBS preserves the page’s alpha channel automatically. You do not need a color key filter for a truly transparent Browser Source. In fact, adding a chroma key to an alpha overlay can erode anti-aliased text and create rough edges.

Diagnose a black or colored rectangle

First check the overlay configuration and confirm Background is set to Transparent. Then inspect the OBS source Custom CSS field. Templates copied from older tutorials often include a body background or forced color that overrides the page.

Temporarily place a bright solid-color source below the overlay. If the color is visible everywhere except the intended text or card, alpha is working. If a rectangle remains, remove source filters one at a time and use Refresh cache of current page after each change.

  • Do not capture the browser window with Display Capture when a Browser Source is available.
  • Avoid applying a color key unless the source truly has a green-screen background.
  • Check nested scene filters if the individual source appears correct.

Make transparent text readable

Transparency removes the safety of a fixed background. White text can disappear over clouds, menus, or webpages; dark text can disappear in gameplay shadows. A small outline, shadow, translucent plate, or deliberately chosen safe area is more reliable than increasing brightness alone.

Review the overlay over representative footage, not only the checkerboard preview. If the scene changes dramatically, use a subtle semi-transparent background rather than sacrificing legibility. Accessibility and viewer comprehension are more important than preserving perfect transparency.

Avoid scaling artifacts

Thin borders and small type can develop fringes when a Browser Source is scaled to a fractional size. Prefer whole-number source dimensions and avoid extreme downscaling. If a compact overlay looks soft, reduce its browser viewport and render the text closer to the final display size.

Record a movement-heavy sample because stream compression changes the apparent edge quality. A design that looks pristine in the OBS canvas may need a slightly stronger background or larger font after encoding.