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.9

Padding X16px

Padding Y12px

Radius14px

Border width2px

Border color

Blur0px

Text

Message color

Text shadow

Shadow color

Shadow blur4px

Text background

Text bg opacity0

Text bg padding X4px

Text bg padding Y1px

Text bg radius4px

Username

Default color

Weight700

Glow

Glow color

Username background

Username bg opacity1

Username bg padding X10px

Username bg padding Y3px

Username bg radius8px

Show badges

Owner color

Mod color

Member color

Layout

Style

Align

Max width420px

Gap12px

Show avatar

Avatar size28px

Avatar shape

Animation

Enter

Duration380ms

Idle loop

Hover lift

Gradients

Bubble gradient

Gradient to

Angle135°

Username gradient

Username to

Animate username

Effects

Glow

Glow color

Glow intensity0px

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

/* ==========================================================
 * Pastel Notes — 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=Zen+Kaku+Gothic+New: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 #it...

Chatto Studio — Design your Twitch and YouTube chat overlay