Customize Twitch Chat in OBS with Custom CSS

This article provides a straightforward, step-by-step guide on how to completely alter the layout and visual style of your Twitch chat overlay in OBS Studio using custom CSS. You will learn how to set up the chat browser source, locate the custom CSS field, and apply specific code snippets to modify fonts, hide backgrounds, create chat bubbles, and customize the overall layout to match your stream’s aesthetic.

Step 1: Get Your Twitch Chat URL

To display your chat in OBS, you need the dedicated link for your Twitch chat room.

  1. Go to your Twitch channel’s chat page.
  2. Click the Settings (gear icon) at the bottom of the chat column.
  3. Select Popout Chat.
  4. Copy the URL of the new window that opens (it will look like https://www.twitch.org/popout/yourusername/chat?popout=).

Step 2: Add the Browser Source to OBS Studio

Next, you must load this URL into OBS as a browser source.

  1. Open OBS Studio.
  2. In the Sources dock, click the + (Add) button and select Browser.
  3. Name the source (e.g., “Twitch Chat”) and click OK.
  4. In the properties window, paste your copied Twitch popout chat URL into the URL field.
  5. Set the Width and Height to match your desired chat overlay size (e.g., Width: 350, Height: 600).

Step 3: Apply Your Custom CSS

At the bottom of the Browser Source properties window, you will find the Custom CSS text box. This is where you paste the code to alter the layout.

  1. Scroll down to the Custom CSS field.
  2. Select and delete any default CSS code currently in the box.
  3. Paste your custom CSS string (see examples below).
  4. Click OK to apply the changes.

Custom CSS Layout Templates

Below are common CSS snippets you can copy and paste into OBS to completely transform the chat layout.

1. Transparent Background with Clean Text

This CSS removes the dark Twitch background, leaving only the text and badges visible over your gameplay.

/* Hide Twitch's default background */
body, .chat-room {
  background-color: transparent !important;
}

/* Style the chat text for high visibility */
.chat-line__message {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000, 1px -1px 2px #000000, -1px 1px 2px #000000 !important;
  margin-bottom: 8px !important;
}

2. Chat Bubble Layout

This layout wraps each individual chat message in a semi-transparent bubble, separating the messages visually.

/* Make background transparent */
body {
  background-color: transparent !important;
}

/* Turn each message into a styled bubble */
.chat-line__message {
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

3. Minimalist Layout (Hide Badges and Icons)

To keep your stream layout as clean as possible, this snippet hides user badges (moderator, sub, VIP icons) and streamlines the text.

body {
  background-color: transparent !important;
}

/* Hide all user badges */
.chat-badge {
  display: none !important;
}

/* Compact the message padding */
.chat-line__message {
  padding: 2px 5px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

How to Live-Test Your CSS Changes

To test your new layout without waiting for a viewer to type in chat, you can send messages to your own channel. Open your Twitch dashboard or creator portal in a web browser, type test messages in your chat, and watch them render in real-time in your OBS preview window. If the layout is not positioned correctly, adjust the Width and Height values in the browser source properties.