Blur and Fade CSS for Owncast Chat Overlays in OBS Studio

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 Cascading Style Sheets (CSS) below should be pasted into the Custom CSS window of the OBS Browser element when you embed your readonly chat window 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:…