StreamElements has no CSS field on its chat widget (verified against StreamElements' live
editor, September 2026). So this studio builds the chat itself as a
StreamElements Custom widget: three blocks (HTML, CSS, JS) that you paste into StreamElements,
exactly like the Social Rotator. It lives in your cloud overlay and follows you to any
computer. Use the toggle in the top bar to pick where the chat lives.
1 · StreamElements widget (recommended)
1) In the StreamElements overlay editor click + (Add Widget) → STATIC / CUSTOM →
Custom widget.
2) Select the new widget, then in the left panel click OPEN EDITOR. You'll see tabs
named HTML, CSS, JS, FIELDS (and DATA - leave it alone).
3) Copy each box from this studio's right panel into the tab with the same name:
HTML → HTML, CSS → CSS, JS → JS. The FIELDS box is optional - it adds a
“Send a test message” button to the widget's settings so you can see the style
without going live.
4) Click DONE, then SAVE the overlay (top right). Two separate saves.
5) Drag and resize the widget box where the chat should live. The box is the chat's
clip region, so make it as tall as you want chat to reach.
The JS block renders StreamElements' live chat events (messages, deletions, timeouts)
into the markup the CSS styles - badges, emotes (Twitch, BTTV, FFZ, 7TV as StreamElements delivers
them), /me actions. Each chatter's Twitch color is exposed to the CSS, so
“each chatter's own color” tinting works here. Everything is baked in:
to change the look later, re-copy and re-paste the blocks.
2 · StreamElements’ built-in “Your stream's chat” (CSS goes into OBS)
If you'd rather keep StreamElements' built-in chat widget (added via + → Stream Tools →
Your stream's chat): the StreamElements editor has no CSS box for it, its “Theme: Custom”
option only reveals a background-color picker. The CSS goes into OBS instead:
1) In StreamElements, set the widget's Theme → Custom (removes built-in backgrounds) and
keep “Show messages permanently” ON - the generated CSS has its own
“Hide after” fade-out (Animation & lifetime panel), and two competing timers
would fight.
2) In OBS, right-click your overlay Browser Source → Properties.
3) In the Custom CSS field, keep OBS's default body line and paste the
generated CSS below it. Click OK.
Because the CSS lives in OBS, the StreamElements editor preview will not show your styling
(check OBS), and it has to be pasted again on every machine you stream from. Usernames in
that widget are inline-colored per user, so recoloring them requires !important
(this studio handles that). There is no per-user color variable there - row tinting can
only be fixed or role-based.
Capability differences - per-user row tinting (“each chatter's own color”)
and the “New messages” direction work on both targets; the native widget path
needs the OBS paste on every PC, the Custom widget path lives in StreamElements.
Getting it into OBS
Your StreamElements overlay URL never changes: three dots on the overlay card → Copy URL,
then in OBS add a Browser source with that URL at 1920×1080. The widget
is saved inside StreamElements; after saving, right-click the browser source in OBS →
Refresh if it doesn't update on its own. Role-based styling uses the CSS
:has() selector, supported by OBS 31+ (OBS 28–30 ship an older
Chromium and will ignore the role rules - names then keep their normal colors) and by the
StreamElements editor preview.
Testing
Paste the optional FIELDS block and the widget's settings panel in StreamElements gets a
Send a test message button. The preview in this studio renders the exact markup the
widget JS produces, but always sanity-check in the StreamElements editor before streaming.
Filtering - already built into StreamElements
Hiding !commands, ignoring bots (StreamElements, Nightbot, Streamer.bot…),
and per-user ignore lists are settings of StreamElements' native chat widget, not CSS. The
Custom widget skips the StreamElements bot; other filtering isn't built in yet.
Wheel chat & the widget box
The wheel bends your chat around an off-screen hub - and it happens inside the
widget box you draw in the StreamElements editor. Two rules of thumb:
1) Draw the box big - at least 620×550, ideally 800×720. The curve needs sideways room;
in a narrow column (250–350px) the cars get squeezed thin and the fan can't
spread. Use the preview's Box selector to see exactly how your box size behaves
before you commit.
2) Wheel messages are fixed-size “cars”: at most 3 lines each
(longer messages get an ellipsis), roughly 3–5 visible depending on radius -
a bigger Wheel curve radius fits more cars. This is what keeps the wheel from
ever stacking on itself.
3) Cars dissolve as they ride up the rim - the deepest one is a faint ghost
before it ever reaches the edge of the box, so messages fade away rather than getting
chopped mid-sentence at a border.
OBS tips
Keep the browser source's “Shutdown source when not visible” OFF (hidden
scenes throttle JS timers; overlays resync when shown, but shutdown resets them entirely).
A browser-source FPS of 30 is plenty for chat. Fewer, bigger browser sources (one StreamElements overlay
with several widgets) perform better than many small ones.
Custom images - badge art & bubble images
Both take a direct image link (the URL opens the bare image, not a page
around it - i.imgur.com/….png works; Discord attachment links expire and will
quietly break). Ideal sizes: badge art - square transparent PNG,
72×72 px or larger (128×128 is a safe pick; badges render at
~18–36 px, bigger art just means crisper edges). Bubble image -
transparent PNG around 800×200 px (row-shaped at double size), then
pick a fit: Stretch for bubble/frame art, Fill for photos,
Tile for patterns. Keep files under ~100 KB - they load every time chat
renders. The full walkthrough is in the How to use tab, section 5.
Saving your work
Save preset stores your current settings in this browser (localStorage).
Presets can be re-applied, renamed via re-save, or deleted. The generated CSS itself is
always visible in the right panel - you can also keep a copy anywhere you like.
Browser storage can be wiped (clearing browsing data, a new computer, another browser) -
so the Backups button in the top bar saves everything you've made in the whole
studio (chat styles, rotator designs, QR settings, all saved presets) as one file, and
restores it anywhere. On Chrome and Edge you can also link a vault file that
auto-saves itself on every change - set it once and never think about it again.