跳到正文
前端设计博物馆
V-04

颗粒噪点

Grain Noise

在画面上撒一层随机像素，给纯色和渐变加质感，顺手压掉色带。

  • 又叫：
  • 噪点
  • 颗粒感
  • 胶片颗粒
  • 杂色
  • film grain
  • noise texture
  • grain overlay
展厅
视觉质感
形态
固定舞台
播放
常驻循环
关键词
纯 CSS / 滤镜与混合 / 重绘开销 / 可以直接用
V-04形态 固定舞台播放 常驻循环Grain Noise

参数工作台

复制给 AI

随参数实时更新

给这块深色渐变面板加一层颗粒噪点（grain noise）：把一张 160x160 的 SVG feTurbulence data URI 当 background-image 平铺，baseFrequency="0.67"（约 1.5px 颗粒）、type="fractalNoise"、numOctaves="3"、stitchTiles="stitch"；噪点层 opacity: 10%、mix-blend-mode: overlay、pointer-events: none；再补一个 <feColorMatrix type="saturate" values="0"/> 把噪声转成中性灰（feTurbulence 连 alpha 都是随机的，不转灰叠上去会发彩）。再用 steps() 的 transform 位移做胶片跳动，目的是压住渐变色带，不是把画面搞脏。

什么时候用

  • 大面积渐变或深色背景出现一圈圈色带（banding）时，用噪点把它打散
  • 卡片、插画、缩略图想有一点胶片或纸张的颗粒，不再干净到发假
  • 不同来源的图片材质不统一，铺一层颗粒把它们拉进同一个世界
  • 深色界面里加一点质感，比再加一层投影更轻

适用场景：页面 / 卡片

推荐取值

baseFrequency
0.5–0.9
numOctaves
2–4
颗粒直径
1–2px
不透明度
3%–10%
混合模式
overlay / soft-light / normal
瓦片尺寸
120–200px

别搞混

  • 和「半透明黑色遮罩」的区别

    蒙一层黑是整体压暗，亮度往下走；噪点让每个像素随机变亮或变暗，平均亮度不变，所以画面不黑，只是有了颗粒。

  • 和「重复纹理贴图」的区别

    平铺一张 png 会看到重复单元和接缝，放大后尤其明显；feTurbulence 生成的是程序化噪声，配合 stitchTiles="stitch" 几乎看不出重复，颗粒粗细还能随参数调。

  • 和「抖动 dithering」的区别

    抖动是渲染器为了压制色带自己做的，粒度跟像素对齐；颗粒噪点是你手动叠的一层材质，可以调大小、强度和混合模式。

容易踩的坑

  • baseFrequency 低于 0.3 会变成大块云雾，不像颗粒；0.5–0.9 之间才是细砂
  • 噪点层必须 pointer-events: none，不然整块区域都点不动
  • 不透明度超过 15% 画面会发脏，文字对比度也跟着掉，3%–10% 通常刚好
  • 深色背景上用 overlay 混合几乎看不见，换 normal 或提高强度
  • feTurbulence 是实时算的，SVG 尺寸给太大会拖慢首帧，用 120–200px 的小瓦片平铺
  • 给噪点层加抖动动画时用 steps() 而不是线性缓动，线性看起来像在飘

无障碍降级

颗粒是静态材质，不需要降级；如果做了模拟胶片跳动的逐帧位移，prefers-reduced-motion: reduce 下停掉抖动，只留静止的颗粒层。

关键词

  • feTurbulence
  • fractalNoise
  • baseFrequency
  • stitchTiles
  • mix-blend-mode
  • SVG filter
  • data URI

参考

相关展品