How to Add Custom CSS to OBS Browser Source

This guide provides a straightforward, step-by-step process for adding custom CSS to a browser source in OBS Studio. By following these instructions, you can easily customize the appearance of your stream overlays, alerts, chat boxes, and web widgets to match your broadcast’s unique visual style.

Step 1: Add or Select a Browser Source

Open OBS Studio and navigate to the Sources dock. * To add a new source: Click the + (Add) button, select Browser, name the source, and click OK. Enter the widget or website URL in the URL field. * To edit an existing source: Double-click the existing Browser Source in your list to open its properties window.

Step 2: Locate the Custom CSS Field

In the Browser Source properties window, scroll down to the bottom. You will find a text area labeled Custom CSS. By default, OBS populates this field with a basic code block that clears margins and makes the background transparent:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

Step 3: Enter Your CSS Code

You can now edit, replace, or append code within the Custom CSS text box.

To hide elements: If you want to hide a specific element from the webpage, target its class or ID and set the display to none.
```
.element-to-hide { display: none !important; }
```
To modify fonts and colors: You can override the website’s default styling by targeting text elements.
```
body { font-family: 'Helvetica', sans-serif; color: #ff0000; }
```

Step 4: Apply and Preview the Changes

After pasting or writing your CSS, click the OK button at the bottom of the properties window. The OBS preview canvas will immediately update to reflect your custom styling.

Step 5: Refresh Cache (If Needed)

If the changes do not render immediately, or if the overlay looks glitched: 1. Double-click the Browser Source to reopen the properties. 2. Scroll down and click the Refresh cache of current page button. 3. Click OK.