A mesh gradient rendered in WebGL, then quantised through a Bayer matrix so it reads as printed halftone rather than a blur. Every setting is live, and the panel underneath is the code for what you are looking at.

Dither backgrounds

WebGL

Field

Tone field

Speed0.3

Drift of the tone field

Warp0.25

Turbulence in the field

Grain

Pixel size3

Size of one dither cell

Levels3

Two is a hard cross-hatch

Dither warp0.35

Warp applied to tone only

Colour

Palette

Mode

Colour low0.15

Where the dark end sits

Colour high0.85

Where the light end sits

Edit the code to change the preview

<DitheredBackground
  palette="dusk"
  gradientType="warp"
  colorMode="paired"
  speed={0.3}
  pixelSize={3}
  warp={0.25}
  ditherLevels={3}
  ditherWarp={0.35}
  colorLow={0.15}
  colorHigh={0.85}
/>

<DitheredBackground
  palette="dusk"
  gradientType="warp"
  colorMode="paired"
  speed={0.3}
  pixelSize={3}
  warp={0.25}
  ditherLevels={3}
  ditherWarp={0.35}
  colorLow={0.15}
  colorHigh={0.85}
/>