Putting chat on screen is what makes a VOD watchable afterwards — someone catching the recording sees the reactions, not just your half of the conversation. It also lets you read chat without looking away.
What the Chat Overlay CSS does
Creates a styled chat overlay to add as a browser source in OBS, so messages appear on the stream itself.
It changes what a VOD is worth. Without it, a recording of a stream is one side of a conversation; with it, the jokes land.
Open the Chat Overlay CSS and follow the settings and checks below.
Setup and considerations
| Setting | What it means |
|---|---|
| Add to OBS as | A browser source |
| Purpose | Show chat on stream and in the VOD |
| Readability | Needs an outline or shadow over video |
| Message count | Fewer is better — 5 to 8 lines |
| Moderation | Whatever appears on screen is in the recording |
| CPU | A browser source costs more than a static image |
| Privacy | Generated in your browser |
How to use it
- Style it for contrast — text over video needs an outline or shadow.
- Add it as a browser source and position it clear of the action.
- Test with real chat moving, not a static preview.
A practical quality check
Whatever appears in the overlay is baked into the VOD permanently. A message your moderators delete two seconds later is still in the recording, and you cannot edit it out without re-encoding the whole thing. If your chat is fast or your moderation is thin, showing fewer lines is safer than showing more.
Common questions
Why is my chat overlay hard to read?
Plain text over video is unreadable whenever the background is busy or bright. Add a strong outline or drop shadow, or a semi-transparent panel behind the text — contrast matters far more than font choice.
How many messages should I show?
Five to eight lines. More becomes a wall that nobody reads and that covers your content; fewer scrolls too fast to follow during a busy moment.
Do deleted messages disappear from the VOD?
No. The overlay is recorded as part of the video, so anything that appeared is permanent. That is worth weighing before showing chat on a channel with heavy traffic.
Does a browser source hurt performance?
It costs more than a static image, since it is effectively a small web page rendering continuously. On a CPU-constrained machine that competes with your encoder — one more reason to keep the overlay simple.
Useful next tools
- Stream Overlay Creator — Design a transparent webcam overlay for OBS.
- Stream Alert Creator — Design follower, sub and donation alert graphics.
- Brb Overlay — A styled page to drop into OBS as a browser source.
- Obs Settings Assistant — Recommended bitrate and encoder settings for your setup.
Vootkit provides a browser tool and educational guidance, not a guarantee that every browser, device or third-party platform will accept every file. Platform specifications can change, so verify important publishing requirements with the destination service.
Try the tools from this guide
Keep reading
How to Create a BRB Screen and Countdown Overlay
Creates a \"be right back\" card to switch to during a break — sized for a stream canvas and ready as an OBS source.
How to Resize Emotes and Stickers Without Losing Clarity
Resizes a single image into the exact set of sizes a platform requires, in one pass — because you need all of them, not one.
How to Pick a Giveaway Winner Fairly and Transparently
Draws a random winner from a list of entrants, on screen, so the selection happens where everyone can see it.