{"id":220,"date":"2025-05-19T15:51:23","date_gmt":"2025-05-19T06:51:23","guid":{"rendered":"https:\/\/alive-project.com\/en\/streamer-magazine\/?p=220"},"modified":"2025-12-18T17:20:55","modified_gmt":"2025-12-18T08:20:55","slug":"3245","status":"publish","type":"post","link":"https:\/\/alive-project.com\/en\/streamer-magazine\/article\/3245\/","title":{"rendered":"Top 3 Sites to Display Comments & Chat with Custom CSS in OBS"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

This article introduces three sites where you can display comments using custom CSS in OBS.<\/p>\n\n\n\n

Site Name<\/th>Features<\/th><\/tr><\/thead>
Chat v2.0 Style Generator<\/td>Allows detailed customization such as fonts and background colors.<\/td><\/tr>
Haishin Toolkit<\/td>Enables creation of CSS specifically for YouTube and Twitch chats.<\/td><\/tr>
Streamlabs<\/td>Smoothly adjusts the design of the comment section and generates URLs.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

What is Custom CSS in OBS?<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Custom CSS in OBS is a handy feature that allows you to design comment sections and Discord icons to your liking.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

Even if you\u2019re not sure where to start, you can follow step-by-step, making it easy to proceed without getting lost.<\/p>\n\n\n\n

Site for Utilizing Custom CSS with OBS \u2460 “Chat v2.0 Style Generator”<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Here, we explain the steps to display comments on YouTube LIVE using “Chat v2.0 Style Generator.”<\/p>\n\n\n\n

The general steps are as follows:<\/p>\n\n\n\n

    \n
  1. Configure settings in “Chat v2.0 Style Generator”<\/li>\n\n\n\n
  2. Add a “Browser” source<\/li>\n\n\n\n
  3. Copy the URL<\/li>\n\n\n\n
  4. Paste the URL<\/li>\n\n\n\n
  5. Make the comment background transparent<\/li>\n<\/ol>\n\n\n\n

    <\/p>\n\n\n\n

    It’s an easy-to-use tool even for beginners, so first, access the official site<\/a>.<\/p>\n\n\n\n

    Settings in “Chat v2.0 Style Generator”<\/h3>\n\n\n\n

    First, you’ll need to set up in “Chat v2.0 Style Generator.” Follow the steps below.<\/p>\n\n\n\n

      \n
    1. Change the font<\/li>\n\n\n\n
    2. Change the background color<\/li>\n\n\n\n
    3. Hide the channel icon<\/li>\n\n\n\n
    4. Hide the channel name<\/li>\n<\/ol>\n\n\n\n

      <\/p>\n\n\n\n

      Change the Font<\/h4>\n\n\n\n

      You can freely change the impression of the comment section using free Google fonts or fonts available on your computer.<\/p>\n\n\n\n

      For game streams, pop fonts are recommended, while calm fonts are suitable for talk streams.<\/p>\n\n\n\n

      It’s easy to change by manually specifying the font name, allowing you to adjust according to your mood.<\/p>\n\n\n\n

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

      Change the Background Color<\/h4>\n\n\n\n

      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.<\/p>\n\n\n\n

      Simply changing the background color can add contrast to your streaming screen.<\/p>\n\n\n\n

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

      Hide the Channel Icon<\/h4>\n\n\n\n

      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.<\/p>\n\n\n\n

      The icon settings are as follows:<\/p>\n\n\n\n