So you added a browser source in OBS Studio. Nice. But now you see an ugly white or black box around it. Not nice. Don’t worry. Making your browser source transparent in OBS is easier than you think. You just need the right settings. And maybe one or two small tweaks.

TLDR: To make a browser source transparent in OBS Studio, your web page must have a transparent background, and OBS must not force a background color. Set the page background to transparent in the browser source properties. If needed, edit the CSS of your overlay to use background: transparent;. Once done, your overlay will blend cleanly with your stream.

First, What Is a Browser Source?

A browser source in OBS is a built-in mini web browser. It loads websites directly into your scene. This is perfect for:

  • Stream alerts
  • Chat overlays
  • Event lists
  • Custom HTML widgets
  • Stream labels

Instead of screen capturing a website, OBS loads it directly. That makes it clean and sharp. But transparency only works if the website itself allows it.

That’s the key idea. OBS can’t magically remove a background that is baked into the page.

Step 1: Add a Browser Source in OBS

If you haven’t already, let’s start from scratch.

  1. Open OBS Studio.
  2. Go to your Sources panel.
  3. Click the + button.
  4. Select Browser.
  5. Name it whatever you like.
  6. Click OK.

Now paste your URL into the URL field. Set width and height if needed. Then click OK.

You should now see your browser source appear in the preview window.

If there’s a solid background, keep reading.

Image not found in postmeta

Step 2: Make Sure the Website Background Is Transparent

This is the most important step.

Your overlay page must have a transparent background. If the page uses white, black, or any solid color, OBS will show it.

If you control the HTML or CSS, add this:

body {
  background: transparent;
}

Or even better:

html, body {
  background-color: rgba(0, 0, 0, 0);
}

This forces full transparency.

If you’re using a third-party alert or overlay service, look inside its settings. Many have a checkbox that says something like:

  • Enable Transparent Background
  • Disable Background
  • Custom CSS

Turn it on if available.

If not, check if you can inject custom CSS. That usually solves it.

Step 3: Check OBS Browser Source Settings

Right-click your browser source in OBS.

Select Properties.

Now look carefully at the settings.

Make sure:

  • The correct URL is pasted.
  • Width and Height match your overlay size.
  • If there is a Custom CSS box, it does not force a background color.

If you see a custom CSS field, you can also add:

body { background-color: rgba(0,0,0,0) !important; }

Click OK after changes.

If everything is set correctly, the background should disappear.

Common Problem: White Background Still Shows

This happens a lot.

Here’s why:

  • The website has a default white background.
  • The CSS wasn’t applied correctly.
  • The overlay platform forces styling.

Quick fixes:

  1. Refresh the browser source (right-click → Refresh).
  2. Restart OBS.
  3. Clear the browser cache (inside browser source properties).

Yes, cache can cause issues. Especially after changing CSS.

Bonus Tip: Use PNG and WebM for Transparency

If your browser source displays images or animations, make sure they support transparency.

Best formats:

  • PNG for images
  • WebM with alpha channel for video
  • GIF (limited quality, but works)

If you use MP4, transparency will not work. MP4 does not support alpha channels.

This isn’t an OBS issue. It’s a format limitation.

What If You Can’t Edit the Website?

Sometimes you don’t control the page.

Maybe it’s a widget. Or a third-party tool with no CSS options.

You still have options.

Option 1: Use a Chroma Key

If the background is bright green or another solid color, you can remove it.

  1. Right-click the browser source.
  2. Select Filters.
  3. Click +.
  4. Choose Chroma Key.

Adjust settings until the background disappears.

This works best with bright green backgrounds.

But it’s not perfect. Fine details can suffer.

Image not found in postmeta

Option 2: Crop It

Hold ALT while dragging the edges of the source in OBS.

This crops parts of the frame.

You can hide unwanted background edges this way.

It’s simple. And fast.

Advanced Method: For Custom HTML Overlays

If you build your own overlays, transparency is easy.

Start your HTML like this:

<!DOCTYPE html>
<html>
<head>
<style>
  html, body {
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
  }
</style>
</head>
<body>

<!-- Your content here -->

</body>
</html>

This removes margins and ensures the page stays clean and fully transparent.

Also avoid adding:

  • Background images
  • Background gradients
  • Default theme colors

Keep it minimal.

OBS will handle the rest.

Performance Tips

Transparency is great. But browser sources can use CPU.

Keep things smooth:

  • Use small overlay dimensions.
  • Disable unnecessary animations.
  • Lower frame rate if not needed.
  • Avoid heavy JavaScript.

If an overlay lags, it may not be a transparency issue. It might just be too complex.

Quick Transparency Checklist

If something isn’t working, go through this list:

  • Is the website background set to transparent?
  • Did you use background: transparent; in CSS?
  • Did you refresh the source?
  • Did you clear the cache?
  • Are image formats supporting transparency?
  • Is OBS up to date?

Most problems are solved in under five minutes.

Why Transparency Matters

Transparent overlays look professional.

They blend into your scene.

No ugly boxes.

No weird borders.

Your alerts float naturally over gameplay or camera.

And your stream instantly looks cleaner.

Small detail. Big difference.

Final Thoughts

Making a browser source transparent in OBS Studio is not complicated.

It just feels mysterious at first.

Remember the golden rule:

Transparency must come from the website itself.

OBS will display exactly what the page outputs. Nothing more. Nothing less.

Once your CSS uses a transparent background, OBS does the magic automatically.

Now go clean up those overlays.

Your stream deserves it.