背景颗粒纹理(噪点)生成器
调整颗粒并在背景上查看效果。SVG 使用 feTurbulence 滤镜,只有几个字节;PNG 是可无缝平铺的小图块。
使用方法背景用的胶片颗粒
背景上的文字
广告
背景颗粒纹理(噪点)生成器: 用途
一层轻微的颗粒能让纯色背景和渐变呈现纸张或胶片的质感,还能掩盖柔和渐变中出现的色带。
调整颗粒大小、细节、不透明度和混合模式,并在测试渐变上查看效果。复制应用在伪元素上的 SVG 噪点 CSS(feTurbulence 滤镜,字节很少且无接缝),或下载 128、256 或 512 px 的 PNG 作为平铺背景。
使用方法
- 调整颗粒、不透明度和混合模式。
- 在你的背景颜色上测试。
- 复制 CSS 或下载 PNG。
使用场景
- 渐变的主视觉背景。
- 带纸张质感的卡片。
- 复古或胶片风格。
常见问题
颗粒纹理有什么用?
一层轻微的噪点可以去除纯色背景和渐变的塑料感,让画面更自然,还能掩盖柔和渐变中出现的色带(banding)。
用 SVG 还是 PNG?
使用 feTurbulence 的 SVG 只有几个字节,可缩放到任意尺寸,但由浏览器绘制,在大尺寸动画屏幕上可能较吃力。PNG 是重复平铺的小图块,绘制很轻。对于固定背景,两者都很好用。
颗粒用多少合适?
少一点。不透明度在 5% 到 15% 之间就能带来质感又不弄脏页面;超过这个范围,背景会像一张噪点很重的照片,影响上面文字的阅读。
真的免费吗?
是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。