Stream Chat CRT Overlay
This is a style sheet designed to be used in the Custom CSS property of OBS's Browser Source.
The styles set a black background with green text that has a little glow to it. There are also scan lines and the a highlight scroll every 7 seconds.
The style sheet is designed to be applied directly to the body of the browser source which is why the width on this example page isn't set.
CSS
body {
background-color: #0e1a0c;
color: #138a33;
text-shadow: 0 0 1px #138a00, 0 0 2px #138a0055, 0 0 9px #137700;
}
body:before {
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2) 20%,
rgba(14, 12, 12, 0.2) 80%
);
background-size: 100% 10px;
z-index: 2;
pointer-events: none;
}
body:after {
content: '';
display: block;
width: 100%;
height: 70px;
z-index: 3;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0.2) 10%,
rgba(0, 0, 0, 0.1) 100%
);
opacity: 0.24;
position: fixed;
animation: scanline 7s linear infinite;
}
@keyframes scanline {
0% {
bottom: 100%;
}
80% {
bottom: 100%;
}
100% {
bottom: 0%;
}
}