Creating different grainy effect images using a pure css gradient

Are there any tutorials that show how different grainy design patterns can be made using a css repeating gradient to create a grainy image without using an actual png image to create the grain effect?

I was looking and I couldn’t find anything.

Even just a gradient generator where different grainy effect designs can be made easily.

I know there are tons of gradient generators out there, but none that I am aware of that create images likes these as examples.

Currently, all I know is changing this number to different numbers gives different images on the screen.

0.00085%

But that number can be as big as this number: 0.007854545493%

https://jsfiddle.net/7dfze0n6/