css noise
As of 2018, there is no native 'background noise' implementation in CSS. There is a stackoverflow discussion from 2010 that has a few suggestions.. the highest rated one being a data URI solution. Using a pre-made PNG for texture in the form of a data URI seems to be the defacto workaround.

Last year I made a gradient generator that stacked layers of gradients on top of each other and animated them based on whatever text input you fed it. It was deterministic--the user input was hashed and always created the exact same gradient animation.

After hundreds of iterations, I started to notice some sections which had some dither pattern texture, (   ) happening by pure chance. Realizing this sort of texture was the result of pure css (no images, javascript, canvas, etc) I wanted to home in on what exactly was producing this texture.

I removed one layer at a time that didn't rid of the texture until I was left with 2 layers: a grey-ish gradient top layer with blend-mode set to hue, and an underlying layer of a solid color. Re-creating this in the form of 2 divs results in the following:
ffchromium
..a nice start at generating texture from virtually nothing, but still some work to be done to get some real random-looking noise texture that is equally satisfactory in both firefox and chrome.

firefox's blend-mode renderer seemed to be a little bit more on-par with photoshop's (solid lines rather than dithered ones, as chrome's did).. so I continued investigating with overlaying layers in photoshop from this point forward. I noticed that the solid lines could be instantly more dither/moire-like by rotating the gradient ever so subtly, and then adjusting the scale (zoom) of the  gradient.. e.g.
180deg179deg178deg170deg
I decided to streamline the process of looking for noisy css patterns with a tool that overlays css gradients at random (based on a hashed input) and started to come closer to finding a combinations of layers that produced very noisy texture.

after lots of trial and error and some tweaking of parameters, I found a set of parameters that (only in chrome) is pretty much what I was looking for: (jsfiddle)

I posted the set of parameters to the stackoverflow thread as a proof of concept.


by fanfare