ZH
PortuguêsEnglishEspañolDeutschFrançaisItaliano日本語Русский中文
首页 收藏
Voltar

背景颗粒纹理(噪点)生成器

调整颗粒并在背景上查看效果。SVG 使用 feTurbulence 滤镜,只有几个字节;PNG 是可无缝平铺的小图块。

使用方法

背景用的胶片颗粒

背景上的文字

可用语言: PortuguêsEspañolEnglishDeutschFrançaisItaliano日本語Русский中文

下一个工具CSS 开关(Toggle Switch)生成器→
广告

背景颗粒纹理(噪点)生成器: 用途

一层轻微的颗粒能让纯色背景和渐变呈现纸张或胶片的质感,还能掩盖柔和渐变中出现的色带。

调整颗粒大小、细节、不透明度和混合模式,并在测试渐变上查看效果。复制应用在伪元素上的 SVG 噪点 CSS(feTurbulence 滤镜,字节很少且无接缝),或下载 128、256 或 512 px 的 PNG 作为平铺背景。

使用方法

  1. 调整颗粒、不透明度和混合模式。
  2. 在你的背景颜色上测试。
  3. 复制 CSS 或下载 PNG。

使用场景

  • 渐变的主视觉背景。
  • 带纸张质感的卡片。
  • 复古或胶片风格。

常见问题

颗粒纹理有什么用?

一层轻微的噪点可以去除纯色背景和渐变的塑料感,让画面更自然,还能掩盖柔和渐变中出现的色带(banding)。

用 SVG 还是 PNG?

使用 feTurbulence 的 SVG 只有几个字节,可缩放到任意尺寸,但由浏览器绘制,在大尺寸动画屏幕上可能较吃力。PNG 是重复平铺的小图块,绘制很轻。对于固定背景,两者都很好用。

颗粒用多少合适?

少一点。不透明度在 5% 到 15% 之间就能带来质感又不弄脏页面;超过这个范围,背景会像一张噪点很重的照片,影响上面文字的阅读。

真的免费吗?

是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。

相似工具

非常感谢您的支持!

每一笔捐赠都有助于维持网站运行。这些工具旨在帮助您,但我们有服务器开销。如果您愿意支持,将不胜感激!请选择或输入金额:

通过Stripe安全支付。将在新标签页打开。

工具按现状提供,不作任何保证。我们不对结果及其使用承担责任。