Open the Vootkit workspace.
01Video & Streaming toolVideo or media file
Chat Overlay CSS
Generate custom CSS to style your chat overlay.
100% FreeRuns instantlyNo watermark
- 1Choose toolOpen the Vootkit workspace.
- 2Add inputProvide the content or settings.
- 3ProcessLet the browser do the work.
Private by designProcessed on your device where possible.
Works on any deviceDesktop, tablet and mobile browsers.
No installationOpen the page and start working.
Always free coreUse the free plan for everyday tasks.
How to use Chat Overlay CSS
Provide the content or settings.
02Let the browser do the work.
03Copy, download or continue.
04Your files stay private
Your work is processed locally in your browser where possible and is never added to a Vootkit upload library.
Learn more about privacyPutting 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 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.
Setup and considerations
| 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 |
Detailed steps
- 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.
Worth knowing
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.
Frequently Asked 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.
Is Chat Overlay CSS free?
Yes. The Vootkit free plan includes 5 tool runs a day. Upgrade to Vootkit Pro for unlimited daily use, an ad-free workspace and saved workflows.
Are my files uploaded?
No. Chat Overlay CSS runs entirely in your browser — your file is processed on your own device and never sent to a server. There is nothing for us to store or delete.
Do I need to install anything?
No. Chat Overlay CSS works in any modern browser on desktop, tablet or phone. Open the page and start.
How often can I use it? Is there a daily limit?
On the free plan you get 5 tool runs a day. When you reach the limit you'll see a prompt to upgrade, and it resets the next day. Vootkit Pro removes the cap entirely for unlimited daily use.
Recently viewed
This tool processes everything locally in your browser. You can disconnect from the internet after the page loads and it will still work.