Bayer Dither Gradient

<!-- Bayer Dither Gradient — ordered-dither gradient dissolve -->
<div class="nuda-ng2-bayer-gradient">
  <div class="nuda-ng2-bayer-gradient__cells" aria-hidden="true"></div>
  <span class="nuda-ng2-bayer-gradient__label">8-bit</span>
</div>

.nuda-ng2-bayer-gradient {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(115deg,#e4ff54,#3a3f10 55%,#09090b);
  isolation: isolate;
}

.nuda-ng2-bayer-gradient__cells {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle,#09090b 45%,transparent 46%),radial-gradient(circle,#09090b 45%,transparent 46%),radial-gradient(circle,#09090b 45%,transparent 46%),radial-gradient(circle,#09090b 45%,transparent 46%);
  background-size: 8px 8px;
  background-position: 0 0,4px 4px,2px 6px,6px 2px;
  opacity: .9;
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: _nuda-ng2bayergrad-drift 10s linear infinite;
}

.nuda-ng2-bayer-gradient__label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #0a0a0a;
  background: #e4ff54;
  padding: 2px 7px;
  border-radius: 4px;
}

@keyframes _nuda-ng2bayergrad-drift {
  from {
    background-position: 0 0,4px 4px,2px 6px,6px 2px;
  }
  to {
    background-position: 8px 0,12px 4px,10px 6px,14px 2px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ng2-bayer-gradient__cells {
    animation: none;
  }
}