CSS radial-gradient 可通过叠加多个微小半透明圆点生成可控噪点背景，配合 background-size 控制密度、rgba 调节透明度（0.03–0.08）、position 偏移打破规律性；canvas 方案则适用于需真随机或交互场景。
用 CSS radial-gradient 快速生成可控噪点背景
纯 CSS 实现噪点背景，不需要图片、不用 JS，radial-gradient 是最轻量且可调的方案。原理是把大量微小的、半透明的圆点铺满画布，靠叠加和透明度模拟噪点质感。
关键不是“画噪点”，而是“控制密度、大小、透明度和随机感”：
-
radial-gradient(circle at X% Y%, #000 0, #000 1px, transparent 1px)：每个圆点本质是一个极小的实心圆（1px 直径），后面紧跟透明扩展，避免边缘模糊 - 用
background-size控制点间距（比如4px 4px表示每 4px 一个点） - 多个
radial-gradient叠加 + 不同background-position偏移，能打破规律性，逼近真实噪点 - 整体
opacity或rgba()调低不透明度（建议 0.03–0.08），否则太“脏”
body {
background-image:
radial-gradient(circle at 25% 25%, #000 0, #000 1px, transparent 1px),
radial-gradient(circle at 75% 75%, #000 0, #000 1px, transparent 1px),
radial-gradient(circle at 50% 10%, #000 0, #000 1px, transparent 1px);
background-size: 6px 6px;
background-color: #f8f9fa;
}用 canvas 动态生成真随机噪点（适合需要变化或交互场景）
如果要每刷新一次都不同，或响应鼠标移动改变噪点强度，CSS 方案就力不从心了——这时得用 canvas 绘制单色/灰度噪声图，再转成 url(data:image/png;base64,...) 贴到 background-image。
核心逻辑是遍历像素点，用 Math.random() 决定是否上色：
立即学习“前端免费学习笔记（深入）”；
- 画布尺寸别太大（如 128×128 足够），否则生成慢、base64 字符串爆炸
- 推荐只涂黑点（
ctx.fillStyle = '#000'），靠透明度控制整体强度，比灰度更可控 - 生成后用
canvas.toDataURL('image/png')导出，赋值给元素的style.backgroundImage - 注意：Safari 对超长 data URL 支持不稳定，超过 ~4KB 可能失效
function genNoiseBg(size = 128, density = 0.05) {
const canvas = document.createElement('canvas');
canvas.width = canvas.height = size;
const ctx = canvas.getContext('2d');
for (let i = 0; i < size * size; i++) {
if (Math.random() < density) {
const x = i % size;
const y = Math.floor(i / size);
ctx.fillRect(x, y, 1, 1);
}
}
return canvas.toDataURL('image/png');
}
document.body.style.backgroundImage = `url(${genNoiseBg(64, 0.07)})`;为什么不用 filter: noise()？它根本不存在
有人搜 css noise filter 会误以为 CSS 有原生噪点滤镜，实际上：filter 属性里没有 noise() 函数，也无标准草案支持。Chrome 曾短暂实验过 filter: noise(2%)，但早已移除，现在所有浏览器都不认。
常见混淆来源：
- 误把 SVG 的
<feTurbulence>当成 CSS 功能（它只在 SVG 滤镜中有效） - 看到某些 PostCSS 插件生成了类似语法，但那只是编译时替换为多层渐变的糖衣
- 把 Canvas API 的
createRadialGradient和 CSSradial-gradient搞混
结论：别浪费时间查 filter: noise，它不会生效。
移动端适配与性能陷阱
噪点背景在手机上容易引发两个问题：渲染卡顿、意外放大的点阵感。
- iOS Safari 对多层
radial-gradient渲染较慢，叠加超过 4 层可能掉帧；建议用 2–3 层 + 更大background-size（如8px 8px）平衡效果和性能 - 安卓部分低端机对
opacity在background-image上的支持不一致，优先改用rgba(0,0,0,0.04)定义颜色，而非全局设opacity - 不要把噪点背景用在
position: fixed元素上——滚动时会触发频繁重绘，尤其在 Chrome for Android - 如果页面有深色/浅色主题切换，噪点色值别写死
#000，改用hsl(0,0%,var(--noise-brightness,20%))方便统一调整
真正难的不是做出噪点，而是让噪点“不抢戏”：太密显脏，太疏像漏网，透明度差 0.01 就可能从氛围感变成视觉干扰。调参时盯着实际设备看，别只信桌面预览。
