噪点纹理生成器
生成可调节密度、透明度和颜色的颗粒纹理,然后下载或复制为 CSS。
单色颗粒
工作原理
一个指定平铺尺寸的画布会被逐像素填充:每个像素独立地按密度滑块的概率决定是否生成颗粒, 然后该颗粒颜色的透明度会按透明度滑块进行缩放。单色模式全程使用同一种颗粒颜色;关闭后每 个颗粒的亮度也会被随机化,呈现出更有质感、更不均匀的效果。下方的平铺预览会将同一张画布 作为 CSS 背景重复展示,方便查看放大后的效果。
下载的 PNG 和“复制为 CSS”得到的 data URI 这两种输出,都直接来自这个画布的
toDataURL/toBlob,完全在你的浏览器中生成,不会上传任何内容。
常见问题
下载的 PNG 能无缝平铺吗?
它是随机的逐像素噪点,而不是重复图案,所以作为小尺寸的重复 background-image 使用时也不会出现明显接缝,因为每个像素都是独立随机生成的,没有会在平铺边缘断裂的更大结构。
下载 PNG 和复制 CSS 有什么区别?
下载会得到一个真正的 .png 文件,可以在样式表或 <img> 中引用。“复制为 CSS”则是把同一张图片以 base64 data URI 的形式直接嵌入 background-image 规则中,适合需要单个自包含 CSS 代码块、无需另外托管文件的场景。
这些内容会被发送到别的地方吗?
不会,纹理是在浏览器内的内存画布上逐像素生成的,不会上传任何内容。