Free AI Chat Overlay Studio for Twitch & YouTube

Chatto

Warming up the glass ✦

Theme

Animation gallery

AI Vibe

Presets

Animation presets

Browse gallery →

Typography

Font

Size15px

Weight500

Line height1.4

Tracking0px

Bubble

Background

Opacity0.78

Padding X12px

Padding Y8px

Radius4px

Border width1px

Border color

Blur6px

Text

Message color

Text shadow

Shadow color

Shadow blur8px

Text background

Text bg opacity0

Text bg padding X4px

Text bg padding Y1px

Text bg radius4px

Username

Default color

Weight800

Glow

Glow color

Username background

Username bg opacity0

Username bg padding X6px

Username bg padding Y2px

Username bg radius6px

Show badges

Owner color

Mod color

Member color

Layout

Style

Align

Max width420px

Gap6px

Show avatar

Avatar size28px

Avatar shape

Animation

Enter

Duration280ms

Idle loop

Hover lift

Gradients

Bubble gradient

Gradient to

Angle135°

Username gradient

Username to

Animate username

Effects

Glow

Glow color

Glow intensity14px

Scanlines (CRT)

Chromatic aberration

Film grain

Sakura petals

Advanced CSS

Live preview

420 × 640 · demo messages

Preview size

WidthHeight

Live chat source

Paste your YouTube live URL or Twitch channel URL to preview your theme with real chat instead of the demo messages.

Status: off

How to find your chat URL

YouTube

1. Open your live stream on YouTube.
2. Click the ⋮ menu above chat.
3. Choose Popout chat.
4. Copy the URL from that popout window and paste it above.

Or paste the normal watch URL — anything with ?v=… works.

Twitch

1. Open your channel: twitch.tv/yourname.
2. Click the gear above chat → Popout Chat.
3. Copy that URL, or just paste your channel URL above.

Export CSS for OBS

Add a Browser Source in OBS pointed at YouTube/Twitch popout chat, then paste this CSS into the source's Custom CSS field.

CSS preview

/* ==========================================================
 * Neon Tokyo — generated by Chatto
 * Target: YouTube + Twitch live chat overlay for OBS
 * Drop into your browser-source Custom CSS field.
 * ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Base */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* ================= YOUTUBE ================= */
html, body,
yt-live-chat-app,
yt-live-chat-renderer,
yt-live-chat-renderer #chat,
yt-live-chat-renderer #contents,
yt-live-chat-item-list-renderer,
yt-live-chat-item-list-renderer #contents,
yt-live-chat-item-list-renderer #item-list...

Chatto Studio — Design your Twitch and YouTube chat overlay