Twitch Chat Overlay

Customize your Twitch chat overlay to fit your stream perfectly – right in your browser.

Choose a style (e.g., Glass, Neon, or Cyberpunk) and customize it as desired: custom background and text colors, fonts, frames, and even glow. The configurator will generate a ready-made link for you, which you can then OBS Simply insert it as a browser source—no additional plugins required. You'll see changes immediately in the live preview.

The overlay supports Twitch and 7TV emotes (including paint styles), displays profile pictures and badges, highlights @mentions, and filters out known bots if desired. You can freely overwrite each preset – for example, Cyberpunk with black background, custom font and dashed pink border + glow.

Features

  • 🎨 Design styles + overrides: Glass, neon, cyberpunk, retro, etc. – background, colors, fonts & effects freely customizable.
  • 🖌️ Colors & Typography: Background (also transparent), text & name color, Google fonts, font size.
  • 🧱 Frame & Glow: Border color, width & style (solid/dashed/dotted/none) as well as configurable glow effect.
  • 📐 Layout: Alignment left/right, compact mode, border radius, profile picture on/off.
  • 💬 Emotes & Paints: Twitch & 7TV including animated names and @mention highlight.
  • 👤 Badges & Avatars: Twitch profile pictures and badges are displayed automatically.
  • 🧹 Bot filter: Hide known bots + add your own list.
  • 🗑️ Moderation: Deleted/timed-out messages disappear automatically.
  • 👁️ Live preview & OBS link: Test the settings and copy the finished link directly.
Presets are applied 1:1. Custom values only take effect if you actively change them.
Only sent when you touch the color (preset-first). Only sent when you touch the color (preset-first).
Controls the outer box around all chat bubbles (background, border, highlight).
Without a selection, the colors defined on Twitch will appear.
By default, older messages are removed as soon as they no longer fit completely in the field of view. This option allows them to remain as a "running feed."
Leave blank or 0 = off. If set, messages fade smoothly after a certain time, regardless of the scrolling mode.
Compact look
"Small Mode" reduces typography and avatars. "Lean Layout" compresses bubbles, spacing, and effects—both can be combined.
Tip: car/empty = automatic, style-dependent values • 0 = remove completely.
How do compact mode, spacing, and paint animation work?
  • Small mode: Smaller font/avatars/line height.
  • Keep the layout slim: Minimizes bubble borders/glow/spacing.
  • pad / gap / padMsg: Number = fixed override; empty = automatic; 0 = remove.
  • Animating 7TV paints: Only moves static paints smoothly. GIFs/APNGs remain animated.

ByteMike Twitch Chat Overlay 1.4.0

Create your account