BETA · FREE

Build your own chat overlay for OBS.

Customize the look, verify the result, and copy the ready-to-use setup.

STREAMELEMENTS DOM PREVIEW
02

Export

Paste the code into the Custom CSS field of the standard Chat widget.

/* Dushat · StreamElements Chat */
@keyframes st-enter { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }

html, body { width: 100%; height: 100%; background: transparent !important; overflow: hidden !important; }
#log {
  min-height: 100vh; max-height: 100vh; padding: 12px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
#log > div {
  flex: 0 0 auto;
  width: fit-content;
  max-width: min(360px, calc(100vw - 20px));
  max-height: 500px;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 12px 14px;
  color: #f5f6f7;
  background: rgba(10, 12, 15, 0.86);
  border-left: 3px solid #ff3659;
  border-radius: 4px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
  
  animation: st-enter .35s ease-out both;
}
#log > div.deleted { visibility: hidden; }
.meta { color: #ff3659 !important; font-weight: 700; }
.message { color: #f5f6f7 !important; }
.badges { display: inline; }
.message .emote,
.message img.emote {
  display: inline-block !important;
  width: auto !important;
  height: 1.45em !important;
  max-width: 2.4em !important;
  max-height: 1.45em !important;
  margin: 0 .08em !important;
  padding: 0 !important;
  vertical-align: -.3em !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.message .emote:first-child { margin-left: 0 !important; }
.message .emote:last-child { margin-right: 0 !important; }
#log > div { animation: st-enter .35s ease-out both, st-leave .35s ease-in 30s forwards; }
.reply, .reply-message, [class*="reply"] {
  display: block; margin: 0 0 6px; padding-left: 8px;
  color: #f5f6f7aa; font-size: .72em; border-left: 2px solid #ff365988;
}
.reward, .redeem, [class*="reward"] { color: #ff3659 !important; font-weight: 700; }

@keyframes st-leave {
  0%, 99% { max-height: 500px; margin-bottom: 10px; }
  100% { opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
STREAM ELEMENTS

Stable option

The CSS targets the standard Chat widget. Selectors may need updates after major platform changes.

TWITCH POPOUT · BETA

No external service

Twitch changes its internal markup regularly. This mode is convenient to start with, but less resilient to platform updates.