How to Make Transparent Chat Overlay in OBS

Adding a transparent chat box overlay to your OBS Studio stream is an excellent way to engage with your audience without blocking your gameplay or video feed. This guide provides a direct, step-by-step process to set up a clean, transparent chat overlay using popular streaming widgets like Streamlabs or StreamElements, as well as how to customize it directly within OBS Studio.

Step 1: Get Your Chat Widget URL

To get a transparent chat, you need a widget link from a stream management platform. Streamlabs and StreamElements are the two most popular free tools for this.

  1. Log In: Go to Streamlabs or StreamElements and log in with your streaming platform credentials (Twitch, YouTube, Kick, etc.).
  2. Locate the Widget:
    • On Streamlabs, go to Widgets in the left sidebar and select Chat Box.
    • On StreamElements, go to Streaming Tools > Overlays gallery > Widgets, or create a custom overlay and add a Stream Chat widget.
  3. Customize Settings: Set the theme to “Clean” or “Transparent.” Adjust the font size, delay, and hide options as desired.
  4. Copy the URL: Copy the unique Widget URL provided at the top of the settings page. Keep this URL private, as it is unique to your account.

Step 2: Add the Browser Source to OBS Studio

Once you have your widget URL, you need to import it into OBS Studio.

  1. Open OBS Studio.
  2. Go to the Sources dock at the bottom of the screen.
  3. Click the + (Plus) icon and select Browser from the menu.
  4. Name the source “Transparent Chat” and click OK.
  5. In the properties window that appears:
    • Paste your copied widget URL into the URL field.
    • Set the Width and Height (standard dimensions are 400 width by 600 height, but you can adjust this to fit your layout).
  6. Click OK.

The chat box will now appear on your OBS canvas. It will remain invisible until someone types a message in your stream’s chat.

Step 3: Position and Test the Overlay

  1. Select the “Transparent Chat” source in your OBS viewport.
  2. Drag the red bounding box to position the chat where you want it on your screen.
  3. Send a test message in your stream’s chat box to ensure the text appears correctly and the background remains completely transparent.

Troubleshooting: Manual Transparency with CSS

If your chat box still has a dark or solid background, you can force transparency using custom CSS within OBS:

  1. Double-click your Transparent Chat browser source in OBS to open its properties.
  2. Scroll down to the Custom CSS field.
  3. Paste the following code at the bottom of the existing text:
body { 
  background-color: rgba(0, 0, 0, 0) !important; 
  margin: 0px auto; 
  overflow: hidden; 
}
  1. Click OK to apply the changes.