Scanlines

<!-- Scanlines — slow-drifting scanline overlay -->
<div class="nuda-grain-scanlines">
  <div class="nuda-grain-scanlines__lines" aria-hidden="true"></div>
  <span class="nuda-grain-scanlines__label">CRT</span>
</div>

.nuda-grain-scanlines {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at center,#16161c,#09090b);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.nuda-grain-scanlines__lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg,rgba(228,255,84,.08) 0,rgba(228,255,84,.08) 1px,transparent 1px,transparent 3px);
  background-size: 100% 3px;
  pointer-events: none;
  animation: _scanlinesDrift 8s linear infinite;
}

.nuda-grain-scanlines__lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent,rgba(228,255,84,.05));
  mix-blend-mode: screen;
}

.nuda-grain-scanlines__label {
  position: relative;
  z-index: 1;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #e4ff54;
  text-shadow: 0 0 10px rgba(228,255,84,.45);
}

@keyframes _scanlinesDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 60px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-grain-scanlines__lines {
    animation: none;
  }
}