Reposition Twitch Chat in OBS Using Custom CSS

This guide explains how to completely reposition and restyle the layout elements of a Twitch chat browser source within OBS Studio using custom CSS. You will learn how to access the CSS properties of your browser source, target specific Twitch chat HTML elements, and apply styles to transform the chat from a standard vertical list into custom layouts, such as stacked text or horizontal tickers.

Step 1: Add your Twitch Chat to OBS Studio

Before applying custom styles, you must load the Twitch chat as a browser source.

  1. Go to your Twitch channel chat, click the Settings (gear) icon, and select Popout Chat.
  2. Copy the URL of the popout chat window.
  3. Open OBS Studio, locate the Sources dock, click the + icon, and select Browser.
  4. Name the source (e.g., “Twitch Chat”) and click OK.
  5. Paste the copied URL into the URL field.
  6. Set the Width and Height to match your desired overlay dimensions.

Step 2: Access the Custom CSS Field

Every browser source in OBS Studio has a dedicated text area for overriding the website’s default styles.

  1. Right-click your Twitch Chat browser source and select Properties.
  2. Scroll down to the bottom of the properties window to find the Custom CSS text box.
  3. Keep this window open; this is where you will paste the CSS code blocks below.

Step 3: Target Twitch Chat Elements

Twitch chat uses specific class names for its elements. To manipulate them, you must target these classes in your CSS. Because Twitch loads its own stylesheets, you must use the !important rule on your CSS declarations to ensure your custom styles override the defaults.

Here are the primary class names you will need: * Entire chat container: .chat-room or body * Individual message row: .chat-line__message * Badges (Sub, Mod, VIP): .chat-badge * Username: .chat-author__display-name * Message text: .text-fragment or .message

Step 4: Apply Repositioning CSS Styles

Depending on your stream’s aesthetic, copy and paste one of the following CSS templates into the Custom CSS field in OBS.

Option A: Stack Username Above the Message

By default, Twitch displays the username and the message on the same line. Use this CSS to stack the username directly above the message text for a clean, modern look.

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

/* Force each message to behave as a column container */
.chat-line__message {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 8px !important;
  margin-bottom: 10px !important;
  background-color: rgba(0, 0, 0, 0.6) !important; /* Semi-transparent bubble background */
  border-radius: 8px !important;
}

/* Adjust layout of badges and usernames */
.chat-line__username-container {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}

/* Indent the message text slightly */
.message {
  padding-left: 5px !important;
}

Option B: Turn Chat Into a Horizontal Ticker

If you want chat to display on a single line horizontally across the bottom of your screen, use this flexbox setup.

/* Transparent background and hide scrollbars */
body {
  background-color: rgba(0, 0, 0, 0) !important;
  overflow: hidden !important;
}

/* Align chat lines horizontally */
.chat-room {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 100% !important;
}

/* Force messages to stay on one line and space them out */
.chat-line__message {
  display: inline-flex !important;
  white-space: nowrap !important;
  margin-right: 25px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  padding: 5px 15px !important;
  border-radius: 15px !important;
}

Option C: Clean Minimalist Chat (Hide Badges & Icons)

If you want to declutter your chat overlay to save space, you can hide badges and timestamps entirely and change the font alignment.

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

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

/* Hide timestamps (if enabled in Twitch settings) */
.chat-line__timestamp {
  display: none !important;
}

/* Increase font size and line spacing */
.chat-line__message {
  font-size: 18px !important;
  line-height: 1.4 !important;
  text-shadow: 1px 1px 2px #000000 !important; /* Adds drop shadow for readability */
}

Step 5: Save and Test

Once you have pasted your chosen code into the Custom CSS field:

  1. Click OK at the bottom of the OBS Browser Source properties window.
  2. Send a few test messages in your Twitch chat to see the layout changes update in real-time on your OBS canvas.
  3. Adjust the Width and Height of your Browser Source if elements appear cut off.