Build your own chat overlay for OBS.

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(312px, calc(100vw - 20px));
  max-height: 500px;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 12px 14px;
  color: #151515;
  background: rgba(255, 255, 255, 0.86);
  border-left: 3px solid #df334d;
  border-radius: 24px;
  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: #df334d !important; font-weight: 700; }
.message { color: #151515 !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: #151515aa; font-size: .72em; border-left: 2px solid #df334d88;
}
.reward, .redeem, [class*="reward"] { color: #df334d !important; font-weight: 700; }

[data-a-target="chat-line-message"] .chat-line__username-container { display: flex !important; width: fit-content !important; margin: 0 0 2px !important; }
[data-a-target="chat-line-message"] .chat-line__no-background span[aria-hidden="true"] { display: none !important; }
#log > div .meta { display: block !important; width: fit-content; margin-bottom: 2px; }
#log > div .colon { display: none !important; }
html body [data-a-target="chat-line-message"], html body .chat-line__message, #log > div {
  display: block !important; width: fit-content !important; max-width: min(312px, calc(100vw - 20px)) !important;
  margin: 0 8px 10px !important; padding: 0 !important;
  background: transparent !important; background-image: none !important;
  border: 0 !important; outline: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; clip-path: none !important; overflow: visible !important;
}
html body [data-test-selector="chat-line-message-highlight"],
html body .chat-line__message-highlight,
html body .chat-line__message--highlighted,
html body [data-test-selector="user-notice-line"]:has([data-a-target="chat-line-message"]) {
  width: fit-content !important; max-width: min(312px, calc(100vw - 20px)) !important;
  margin: 0 8px 10px !important; padding: 0 !important;
  background: transparent !important; background-image: none !important;
  border: 0 !important; outline: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; clip-path: none !important; overflow: visible !important;
}
[data-test-selector="chat-line-message-highlight"] > div,
.chat-line__message-highlight > div,
.chat-line__message--highlighted > div {
  background: transparent !important; background-image: none !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
}
[data-a-target="chat-line-message"] .chat-line__message-container {
  display: block !important; width: fit-content !important; max-width: 100% !important;
  margin: 0 !important; padding: 0 !important; background: transparent !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible !important;
}
[data-a-target="chat-line-message"] .chat-line__no-background { display: block !important; width: fit-content !important; max-width: 100% !important; overflow: visible !important; }
[data-a-target="chat-line-message"] .chat-line__no-background > div { display: block !important; }
[data-a-target="chat-line-message"] .chat-line__no-background > span[aria-hidden="true"] { display: none !important; }
[data-a-target="chat-line-message"] .chat-line__no-background span[aria-hidden="true"],
[data-a-target="chat-line-message"] .chat-line__message-container span[aria-hidden="true"],
#log > div .colon { display: none !important; }
[data-a-target="chat-line-message"] .chat-line__username-container, #log > div .meta {
  padding: 4px 11px !important; color: #fff !important; background: #df334d !important; border-radius: 999px !important;
}
[data-a-target="chat-line-message"] [data-a-target="chat-message-username"] { color: #fff !important; }
[data-a-target="chat-line-message"] [data-a-target="chat-line-message-body"], #log > div .message {
  position: relative !important; display: block !important; width: fit-content !important; padding: 11px 17px !important;
  color: inherit !important; background: rgba(255, 255, 255, 0.86) !important; border: 2px solid #ffffff !important; border-radius: 24px !important;
  box-shadow: 0 4px 11px #0008 !important;
}
div:has(> .channel-points-reward-line__icon) {
  width: fit-content !important; max-width: min(312px, calc(100vw - 20px)) !important;
  color: #151515 !important; background: rgba(255, 255, 255, 0.86) !important; border: 2px solid #ffffff !important;
  border-radius: 24px !important; box-shadow: 0 4px 11px #0008 !important;
}
[data-test-selector="user-notice-line"]:has([data-a-target="chat-line-message"]) {
  width: fit-content !important; max-width: min(312px, calc(100vw - 20px)) !important;
  margin: 0 8px 10px !important; padding: 0 !important;
  color: inherit !important; background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;
}
[data-test-selector="user-notice-line"]:has([data-a-target="chat-line-message"]) div:has(> .channel-points-reward-line__icon) {
  display: flex !important; width: fit-content !important; max-width: 100% !important;
  margin: 0 0 7px !important; padding: 5px 11px !important;
  color: #fff !important; background: #df334d !important; border: 0 !important;
  border-radius: 999px !important; box-shadow: none !important;
}

[data-a-target="chat-line-message"] [data-a-target="chat-line-message-body"]::before,
#log > div .message::before {
  content: ""; position: absolute; top: 9px; left: -12px;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  border-right: 13px solid rgba(255, 255, 255, 0.86);
}
@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; }
}