使用 background-blend-mode: overlay 可自然融合渐变与 SVG 噪声图层，需底层 linear-gradient + 上层透明 SVG pattern（含 feTurbulence 滤镜），opacity 控制在 0.12–0.18，baseFrequency 从 0.05 调整，numOctaves 设为 2 以兼顾 Safari 兼容性与质感。
用 background-blend-mode: overlay 混合渐变与噪声图层
单一层 linear-gradient 无法同时表达方向性色彩过渡和随机纹理，必须分层：底层是纯色渐变，上层是带透明度的 SVG 噪声图案。关键在混合模式——overlay 能保留原渐变色相，又让噪声在中间调区域自然凸显，在高光/阴影处自动弱化。用 multiply 会让颗粒发灰沉闷；screen 容易失真、泛白。
噪声图案必须用 SVG <pattern> + feTurbulence
CSS 本身不支持生成程序化噪声，必须借道 SVG 滤镜。不能把滤镜直接加在 HTML 元素上（会破坏 alpha 通道），也不能用 background-image: url("data:image/svg+xml,...") 内联编码（部分浏览器解析不稳定）。正确做法是：
- 在页面顶部或
<head>中嵌入一个隐藏的<svg>，定义<pattern id="noise-pattern"> -
<pattern>内用<rect>填满，并套<filter>（含feTurbulence type="fractalNoise"） - CSS 中通过
url(#noise-pattern)引用该图案，而非直接引用滤镜
opacity 和 baseFrequency 的取值很敏感
噪声图层自身需设 opacity: 0.12–0.18。超过 0.2 会盖住渐变底色；低于 0.1 则多数屏幕下不可见。这个区间是经实测在 sRGB 和 P3 显示器上最稳妥的范围。
feTurbulence 的 baseFrequency 推荐从 0.05 起手，增大则颗粒更细密，减小则更粗粝。但注意：numOctaves="2" 是平衡性能与质感的临界点，设为 3 或更高会导致 Safari 渲染卡顿甚至崩溃。
立即学习“前端免费学习笔记（深入）”；
Safari 对 background-blend-mode + SVG pattern 组合支持不稳
如果你发现 Safari 下颗粒消失或背景全黑，大概率是混合模式未生效。临时解法是加一层降级 fallback：
- 给元素设
background-color: #f0f0f0（与渐变主色相近的固态色） - 再叠加两层
background-image：第一层是渐变，第二层是噪声图案 - 确保
background-blend-mode: overlay仅作用于这两层，且background-color在最底层不参与混合
真正稳定的做法仍是把噪声逻辑移至 Canvas 或 WebGPU，但那已超出纯 CSS 范畴——颗粒感这件事，边界就在“看起来像自然斑驳”和“真正在所有设备上可预测地渲染”之间。
