To enhance the sense of connection with viewers during live streams, displaying comments or chats on the screen is effective. Utilizing “Custom CSS” in OBS allows you to freely customize the streaming screen.

This article introduces three sites where you can display comments using custom CSS in OBS.

Site Name	Features
Chat v2.0 Style Generator	Allows detailed customization such as fonts and background colors.
Haishin Toolkit	Enables creation of CSS specifically for YouTube and Twitch chats.
Streamlabs	Smoothly adjusts the design of the comment section and generates URLs.

What is Custom CSS in OBS?

Custom CSS in OBS is a handy feature that allows you to design comment sections and Discord icons to your liking.

The basic setup involves using a site to generate custom CSS and then pasting the created code into the “Browser” source in OBS. Changes to fonts, setting background colors, and making comment sections transparent can be easily applied.

All you need is to obtain the URL for the streaming platform (such as YouTube or Twitch) and copy the generated custom CSS.

Even if you’re not sure where to start, you can follow step-by-step, making it easy to proceed without getting lost.

Site for Utilizing Custom CSS with OBS ① “Chat v2.0 Style Generator”

Here, we explain the steps to display comments on YouTube LIVE using “Chat v2.0 Style Generator.”

The general steps are as follows:

1. Configure settings in “Chat v2.0 Style Generator”

2. Add a “Browser” source

3. Copy the URL

4. Paste the URL

5. Make the comment background transparent

It’s an easy-to-use tool even for beginners, so first, access the official site.

Settings in “Chat v2.0 Style Generator”

First, you’ll need to set up in “Chat v2.0 Style Generator.” Follow the steps below.

1. Change the font

2. Change the background color

3. Hide the channel icon

4. Hide the channel name

Change the Font

You can freely change the impression of the comment section using free Google fonts or fonts available on your computer.

For game streams, pop fonts are recommended, while calm fonts are suitable for talk streams.

It’s easy to change by manually specifying the font name, allowing you to adjust according to your mood.

However, note that changing the font requires a change in the custom CSS, so you’ll need to copy and paste it each time.

Change the Background Color

Adjusting the background color can enhance the visibility of comments and create a sense of unity with the streaming theme. You can highlight specific comments or adjust the transparency so as not to disturb the game screen.

Simply changing the background color can add contrast to your streaming screen.

Note that on the first access, the background color item is hidden in “Color Settings,” so make sure to check it.

Hide the Channel Icon

If you want a simpler streaming screen, it’s recommended to hide the viewer’s channel icon. This organizes the overall screen and gives a calm impression.

The icon settings are as follows:

• Hide icon (normal chat)
• Hide icon (super chat)
• Size (normal chat)
• Size (super chat)

Note that “icon” and “badge” are different, as will be discussed in the next chapter.

Hide the Channel Name

You can also hide the username (channel name). This setting is useful if you are concerned about privacy or want to adjust the screen display.

Membership members can also change badge sizes, so if you want to distinguish between members and non-members, adjust these settings.

Add a “Browser” Source

Next, move to the step of displaying the comment section in OBS. Adding a “Browser” source is required, so proceed with the following steps.

1. Launch OBS

2. Click the “+” at the bottom left of the “Sources” tab

3. Select “Browser”

4. Make sure “Create New” is checked

5. Enter a name (e.g., Comment, Chat)

6. Click “OK” to open the settings screen

On the settings screen, you’ll see options for “URL” and “Custom CSS,” which you’ll edit in the following steps.

Copy the URL

The next step is to obtain the URL of the chat section. Streaming platforms like YouTube or Twitch allow you to get the URL using the pop-out feature.

Here, we use YouTube as an example.

1. Access the streaming page
　・Open the live streaming page on YouTube
　・Use the viewing page that shows the streaming video on the left and the comment section on the right
　・Even if your stream is still in preparation, you can test it on other streams

2. Pop out the comment section
　・Click the vertical three-dot icon at the top right of the comment section
　・Select “Pop out chat” from the menu
　・A new window will open displaying the popped-out comments

3. Copy the URL
　・Copy the URL from the browser’s address bar of the opened window
　・The URL format will be something like “https://www.youtube.com/live_chat?v=~&is_popout=1” Ensure the copied URL is in the correct format. If copied from YouTube Studio’s management screen, “studio” might be included. If so, it will not work, so re-obtain the pop-out URL from the correct viewing page.

Paste the URL

Next, refer to the following to paste the copied chat URL into OBS.

1. Launch OBS and open the “Browser” source from the sources tab

2. In the properties screen, paste the copied chat URL in the “URL” field

3. Click “OK” to save the settings

After setup, the chat will be displayed on the streaming screen. It may take a few seconds to display, so check without rushing.

Make the Comment Background Transparent

By making the background of the comment section transparent, the streaming screen has a sense of unity, creating a layout that is easier for viewers to see.

This is where custom CSS comes in, so refer to the following for setup.

1. Generate CSS with “Chat v2.0 Style Generator”
　・Access the site and find the “CSS” section at the very bottom
　・Copy the CSS for transparent backgrounds displayed here

2. Paste it into the “Custom CSS” field in OBS
　・Open the browser source settings screen in OBS
　・Paste the copied CSS into the “Custom CSS” field. Delete all existing code and overwrite it

3. Save the settings and verify
　・Click “OK” to save the settings
　・Check that the comment background is transparent on the streaming screen

If the URL contains “studio,” transparency won’t be applied

If the background is not transparent, the URL format may be incorrect.

The URL used for YouTube streaming usually starts with “https://www.youtube.com/live_chat?is_popout=.” However, if you directly copy the URL from the YouTube Studio management screen, it may include “studio,” causing it not to function properly.

Here are some check points to resolve this issue:

1. Check the URL format
　・Paste the copied URL into the browser’s address bar to check
　・If it includes “studio,” re-obtain it from the correct streaming page

2. Obtain the pop-out URL from the streaming page
　・Select “Pop out chat” from the vertical three-dot menu in the top right of the comment section
　・Re-copy the URL from the opened window

3. Confirm OBS browser settings
　・Ensure “Local File” is not checked
　・Check “Refresh browser when scene becomes active”

4. Update the cache
　・Execute “Update the cache of the current page” within the OBS browser source settings

5. Recheck the CSS
　・Check whether the CSS is pasted correctly and ensure there are no missing or cut-off codes
　・Copy and paste the CSS again if necessary

Adjusting the Width and Height of the Chat

If the chat section becomes too wide or too tall, you can adjust the browser source settings to change it to a more viewable configuration.

1. Double-click the relevant “Browser” source in OBS

2. Adjust the width
　・If it’s too wide, set “Width” to a smaller value, such as 500

3. Adjust the height
　・If it’s too tall, set “Height” to around 500

After adjustments, the appearance of the chat section will improve. Try different sizes according to your streaming content and screen layout preferences.

Site for Utilizing Custom CSS with OBS ② “Haishin Toolkit”

The “Haishin Toolkit” is a convenient website where you can customize the comment sections for YouTube and Twitch in OBS.

It features an interface that’s easy to use, even for beginners, allowing detailed settings like fonts and background colors.

We’ll explain in the following order, so if you want an easy way to display comment sections, refer as we set up:

1. Click “YouTube・Twitch Comment Section”

2. Choose a custom CSS for the comment section

3. Select font and color, then copy the URL

4. Paste the URL

Click “YouTube・Twitch Comment Section”

1. Access the official site of “Haishin Toolkit”

2. Select “YouTube・Twitch Comment Section” from the top page

3. Confirm that a custom screen tailored to your streaming platform opens

“Haishin Toolkit” is a tool for those who want to display chat or comments on YouTube or Twitch with OBS.

We’ll explain how to attach custom CSS next, but if you first want to know how to display comments, check the following article.

Choose a Custom CSS for the Comment Section

On the “YouTube・Twitch Comment Section” page, various custom CSS templates are available.

There are 6 free and 8 paid balloon CSS templates like “Balloon” and “With Headline,” so choose your favorite template and click.

Select Font and Color, Then Copy the URL

Next, is the step to set font and background color. “Haishin Toolkit” allows highly customizable settings, so refer to the following:

1. Select font and background color

2. Copy the custom CSS
　・Select “YouTube CSS” for YouTube streams or “Twitch CSS” for Twitch streams
　・Using CSS that doesn’t match the platform may result in it not being applied

Paste the URL

Finally, apply the obtained URL and CSS in OBS.

1. Launch OBS and create a “Browser” source in the sources tab

2. Open the properties screen and paste the pop-out URL of the comment section in the “URL” field
　・Set it the same way you did with “Chat v2.0 Style Generator” earlier using the browser source

3. Paste the copied CSS into the “Custom CSS” field

4. Save the settings and check the screen

That completes the customization of the comment section.

The broadcast toolkit also has a paid version, so if you want to display stylish comment sections, make sure to check it out.

Site for Utilizing Custom CSS with OBS ③ “Streamlabs”

“Streamlabs” is an overseas site where you can design comment sections from a wide range of options.

Registration is required, but you can sign up with only an email address and password, so access the official site to register.

Settings in “Streamlabs”

It is possible to make detailed design adjustments such as text color, background color, and font size, but the notation is in English, so refer to the following to set up the comment section.

Setting Items	Content
Design and Animation (Theme)	Select the style or animation for chat display.
Text Color	Set the text color for comments.
Font Size	Adjust the font size of the comment section. If it’s too big, it can obscure the view, so set while considering the screen balance.
Display Time of Comments (Hide Message After)	Set the time to display comments on the screen. For dynamic streams, shorter times are effective, while longer times are better for talk-focused streams.
Custom HTML/CSS (Enable Custom HTML/CSS)	Allows for detailed customization. However, beginners do not need to change it.

Make sure to click “SAVE SETTINGS” after changing the settings. Changes will not be applied if you do not save.

Copy the URL

Next, obtain the URL for the chatbox with “Streamlabs.”

1. Access the official “Streamlabs” site

2. Click “YouTube” and log in with your Google account

3. Select “All Widgets” from the left menu

4. Click “Chat Box” to open the settings screen

5. After setting up, click “Launch” at the top of the screen to copy the URL

This URL will be used later in the OBS “Browser” source settings.

Paste the URL

Next, apply the copied URL to OBS.

1. Launch OBS and create a “Browser” source

2. Open the properties screen and paste the copied URL in the “URL” field

3. Click “OK” to save the settings

4. As a test, access your channel and enter a comment

Note:

• It may take a few seconds for the chat to appear
• If you need to adjust the width or height, do so in the OBS “Browser” source settings by changing “Width” and “Height”

That concludes the setup of the comment section using “Streamlabs.” If you are looking to start streaming seriously, also check the following article.

Also, with Alive Studio, which can be used in conjunction with OBS, it is easy to design streaming screens, including displaying comments. If interested, check this out too.

After Setting Custom CSS in OBS, What’s Next?

This time, we explained how to display comment sections or chats on your streaming screen by leveraging “Custom CSS” in OBS. By customizing comments, you can foster smoother communication with viewers and tailor the vibe of your stream to your personal taste.

Once the comment section design is in place, why not focus on the overall presentation of your streaming screen? Utilizing a streaming screen creation service like “Alive Studio” allows for a more polished stream.

• Access to over 1,000 items of background and accessory materials provided by the VTuber material creation team “Usa Neko Memory”!
• More than 100 tracks of BGM provided by the music material site “Maou Damashii”!
• Features like a topic roulette and counter!
• All features accessible for just 980 yen per month (including tax)!

If you’re aiming to significantly enhance the presentation of your streams, consider trying “Alive Studio“.

＼ Try it out free for 7 days and take your stream to the next level! ／