Pixel Beams is an animated WebGL background of subtle charcoal pixels forming drifting plasma waves on a near-black field. It is dark by design, for a low-key texture behind light content rather than a bright hero. Pixel size and threshold set the dither, plasma density and contrast shape the waves, and wave frequency, strength and angle steer them. Animation speed and both colours are editable, so it can be lifted to a lighter palette, and the HTML, React and Svelte exports share the same original renderer.
How this shader works
Pixel Beams draws subtle charcoal pixels that form drifting plasma waves on a near-black field. It is dark on purpose, a low-key texture for behind light text rather than a bright hero. Pixel size and Threshold set the dither, Plasma density and Plasma contrast shape the waves, and Wave frequency, strength and angle steer them. Both colours are editable, so it can move to a lighter palette.
Tips
- Pixel size sets the size of each square. Larger pixels give a retro, low-resolution feel.
- Raise the gap between Dark color and Light color to make the waves easier to see.
- Wave angle turns the direction the beams travel.
- Threshold decides how many pixels light up. Lower it for a fuller pattern.
Questions
How do I make a subtle pixel background?
Open Pixel Beams and keep the two colours close together, as in this preset. Adjust Pixel size and Animation speed, then export it as HTML, React or Svelte code.
Why is it so dark?
The default colours are both near black so it stays behind your content. Pick a brighter Light color to make the waves stand out.
Preview and customize in the browser. Exports require membership.