5-step gradient dithering between two given colors in CSS

dots.css

:root {

  --dot-color-1: black;
  --dot-color-2: white;
  
  --bg-dot-0: var(--dot-color-2);
  
  --bg-dot-25: conic-gradient(var(--dot-color-1) 25%, var(--dot-color-2) 25%) repeat center / 2px
    2px;
    
  --bg-dot-50: conic-gradient(
    var(--dot-color-1) 25%,
    var(--dot-color-2) 25%,
    var(--dot-color-2) 50%,
    var(--dot-color-1) 50%,
    var(--dot-color-1) 75%,
    var(--dot-color-2) 75%
    )
    repeat center / 2px 2px;
    
  --bg-dot-75: conic-gradient(var(--dot-color-2) 25%, var(--dot-color-1) 25%) repeat center / 2px
    2px;
    
  --bg-dot-100: var(--dot-color-1);

}