Blur and Fade CSS for Owncast Chat Overlays in OBS
I was playing around this weekend on improving the way the chat overlay looks on my Owncast stream. Folks like Ozone were a big help in getting me started, then I took it and ran with it. Special thanks to Ety who helped me test.
The CSS below should be pasted into the Custom CSS window of the OBS Browser element when you embed youe readonly chat iwindow from your Owncast site. It will give you a nice slide in for new messages, and a blur and fade out after 60 seconds.
/*
CSS for displaying your Owncast v.0.1.0+ chat onscreen in OBS
to be used with [Your_Owncast_URL]/embed/chat/readonly
*/
@keyframes blur-out {
0% { opacity: 0; transform: translateX(100px); filter: blur(0px); }
2% { opacity: 1; transform: translateX(0); filter: blur(0px); }
91% { opacity: 1; transform: translateX(0); filter: blur(0px); } /* No blur until this point */
99% { opacity: 0.5; transform: translateX(0); filter: blur(10px); } /* Start fast blur */
100% { opacity: 0; transform: translateX(0); filter: blur(20px); } /* Fully blurred */
}
/* Remove background from main chat window */
body, #chat-container {
background-color: transparent !important;
}
/* Apply animation to all chat messages */
#chat-container .chat-message_user,
#chat-container .chat-message_system,
#chat-container .chat-message_social {
animation: blur-out 60s ease-in-out forwards !important; /* Adjust the 60s to whatever tyou want */
}