Softonic

噪点纹理生成器

步 1 / 2
下一步

一点点噪点就能掩盖色带、让纯色块不再生硬，也让界面的渐变没那么呆板。本工具用 SVG feTurbulence 滤镜生成一张可无缝平铺的方形噪点纹理，你可以调节背景色、噪点不透明度、颗粒频率和噪点类型，最后直接拿到写好的 CSS：一个背景色加一段内联 SVG data URI，粘贴进样式表即可使用。

如何生成噪点纹理

  1. 1

    选择背景色

    颗粒是叠加在这个颜色之上的，所以请直接从你实际要用的底色开始。

  2. 2

    设置不透明度

    从几乎看不出来（2-5%）到浓重的胶片颗粒（25% 以上）。界面设计通常越克制越好。

  3. 3

    调节频率

    基础频率越高，颗粒越细密；越低则形成更大、更柔和的斑块。

  4. 4

    选择噪点类型

    分形噪声柔和自然；湍流对比更强，呈现云雾质感。

  5. 5

    复制 CSS

    输出内容是一个背景色加一段内联 SVG data URI，可以直接粘贴到样式表里。

用 feTurbulence 实现 SVG 噪点

体积最小的噪点方案，就是 SVG 加一个湍流滤镜：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

把它内联成 background-image: url("data:image/svg+xml,...")，就得到了几百字节的代码，可以平铺到任意尺寸的表面上，而且不会产生额外的 HTTP 请求。

按场景推荐的参数

使用场景 不透明度 基础频率 噪点类型
深色模式界面面板 3-5% 0.8-1.0 分形噪声
首屏渐变叠加层 5-10% 0.7-0.9 分形噪声
纸质感卡片 8-15% 0.6-0.8 分形噪声
胶片颗粒照片风 15-25% 0.9-1.2 分形噪声
复古海报颗粒 25-40% 0.4-0.6 湍流

性能提示

  • 在大多数浏览器里，SVG 湍流不占用 GPU。 它可以直接用于 CSS 背景，重绘开销也很低。
  • 只用一张平铺图。 本工具输出的是带 stitchTiles="stitch" 的 200 x 200 图块，在大屏上平铺时看不出接缝。
  • 不要让噪点动起来。 不改变 baseFrequency 时 feTurbulence 的动画效果并不好，长时间运行还会让性能明显下降。
  • 把噪点叠加在渐变之上。 在 CSS 渐变上叠一层 10% 不透明度的颗粒，质感会比单纯的渐变丰富得多。

常见问题

只要有大片纯色或渐变区域显得过于干净，就可以考虑。首屏区块、弹窗背景和深色界面面板加上 3-10% 的噪点会更有层次。但要避开正文区域，噪点会影响可读性。

在 SVG 的 feTurbulence 滤镜里，type="turbulence" 取的是柏林噪声的绝对值（对比更强，呈云雾状），而 type="fractalNoise" 使用带符号的数值（颗粒更柔和、更自然）。做界面时，几乎总是应该选分形噪声。

不会。本工具输出的是几百字节的内联 SVG data URI，直接嵌在 CSS 里，既没有图片文件，也没有额外请求。而且它可以缩放到任意尺寸而不会失真。

可以。在每通道 8 位的屏幕上，低对比度的渐变很容易出现明显色带。叠加 2-3% 的噪点会对过渡做抖动处理，无论手机还是显示器，色带都会消失。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

邮箱验证器

验证邮箱地址：RFC 5322 语法检查、实时 MX 记录查询，并显示本地部分、域名和长度详情。不会发送任何邮件。

编辑器配置生成器

根据你的缩进样式与大小、行尾、字符集和空格规则生成 .editorconfig 文件，让不同集成开发环境（IDE）和编辑器的格式保持一致。

证书解码器

粘贴一张 X.509 PEM 证书，并查看解码后的字段：主体、颁发者、序列号、签名算法、有效期及主体备用名称（SAN）。

此工具还提供其他语言版本