Hide Web Elements in OBS Browser Source with CSS

This guide provides a straightforward, step-by-step walkthrough on how to use custom CSS within OBS Studio to hide specific elements of a web page in a browser source. By identifying the target HTML elements and applying simple CSS rules, you can easily clean up your stream overlays, remove unwanted navigation bars, block ads, or isolate specific widgets on any website.

Step 1: Identify the Element to Hide

Before configuring OBS, you need to find the unique identifier (the class or ID) of the web element you want to hide.

  1. Open your web browser (such as Chrome, Firefox, or Edge) and navigate to the webpage you want to use.
  2. Right-click on the specific element you want to remove (for example, a header, a logo, or a sidebar) and select Inspect or Inspect Element.
  3. In the developer tools window that opens, look at the highlighted line of HTML code.
  4. Note the element’s class or id.
    • A class is represented in CSS with a dot (e.g., .sidebar-ad).
    • An ID is represented in CSS with a hashtag (e.g., #header-navigation).

Step 2: Add the Browser Source in OBS Studio

  1. Launch OBS Studio.
  2. Go to the Sources dock at the bottom of the screen.
  3. Click the + (plus) icon and select Browser.
  4. Name your source and click OK.
  5. In the properties window, paste the website URL into the URL field.
  6. Set the desired width and height to fit your stream layout.

Step 3: Apply the Custom CSS

  1. In the Browser Source properties window, scroll down to the text box labeled Custom CSS.
  2. By default, OBS includes some basic body styling in this box. Keep or delete this default text depending on your needs.
  3. At the bottom of the Custom CSS text field, write a CSS rule targeting the element you identified in Step 1, using the display: none !important; declaration.

Example using a class name:

.sidebar-ad {
    display: none !important;
}

Example using an ID name:

#header-navigation {
    display: none !important;
}

Note: The !important rule ensures that your custom CSS overrides any existing styles defined by the website.

  1. Click OK at the bottom of the properties window.

The browser source in your OBS preview will refresh automatically, and the specified elements will now be hidden from view.