grain.css

做设计稿的时候，我总要给背景叠一层噪点，网站上线后却总是忘记。于是写了个库，把这件事变成一行 CSS。

它做什么

@import "grain.css";

body {
  --grain: 0.06;
  --grain-size: 180px;
}

就这样。默认用一张内联的 SVG 噪点图平铺，透明度、颗粒大小、混合模式都可以调。

为什么不直接用图片

• 图片要走一次网络请求；
• 不同 DPI 下颗粒会糊；
• 想改密度得重新导出。

SVG feTurbulence 生成的是矢量噪点，任何缩放下都清晰，还能直接用 CSS 变量控制参数。

注意

颗粒会明显增加大面积纯色的渲染开销，在低端机上建议把 --grain 控制在 0.05 以下，或者只在首屏使用。

状态

在 GitHub 上开源，MIT 协议。没有宣传，靠自然搜索攒了两百多个 star——大概是同类里最小的一个。