Stable option
The CSS targets the standard Chat widget. Selectors may need updates after major platform changes.
Customize the look, verify the result, and copy the ready-to-use setup.
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; }
}The CSS targets the standard Chat widget. Selectors may need updates after major platform changes.
Twitch changes its internal markup regularly. This mode is convenient to start with, but less resilient to platform updates.