使用纯 css 渐变创建不同的颗粒效果图像

Question

是否有任何教程展示了如何使用 css 重复渐变来创建颗粒图像而不使用实际的 png 图像来创建颗粒效果？

我正在寻找，但什么也找不到。

即使只是一个渐变生成器，也可以轻松制作不同的颗粒效果设计。

我知道那里有大量的渐变生成器，但我所知道的创建图像的没有一个像这些示例一样。

https://jsfiddle.net/7dfze0n6/

 .grain1 { width: 300px; height: 300px; background-image: repeating-radial-gradient(ellipse at center center, rgb(75, 154, 242), rgb(64, 135, 228), rgb(54, 117, 214), rgb(43, 98, 200), rgb(33, 79, 185), rgb(22, 60, 171), rgb(12, 42, 157), rgb(1, 23, 143) 0.01px); }.grain2 { width: 300px; height: 300px; background-image: repeating-radial-gradient(circle at center center, rgb(81, 9, 72), rgb(72, 90, 223), rgb(80, 0, 34), rgb(34, 134, 255), rgb(65, 217, 176), rgb(241, 15, 15), rgb(148, 213, 118) 0.1px); }.grain3 { width: 300px; height: 300px; background-image: repeating-conic-gradient(blue, black 0.00085%); }

 <div class="grain1"></div> <hr> <div class="grain2"></div> <hr> <div class="grain3"></div>