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 <h3>为什么不用 <code>filter: noise()</code>？它根本不存在</h3><p>有人搜 <code>css noise filter</code> 会误以为 CSS 有原生噪点滤镜，实际上：<code>filter</code> 属性里没有 <code>noise()</code> 函数，也无标准草案支持。Chrome 曾短暂实验过 <code>filter: noise(2%)</code>，但早已移除，现在所有浏览器都不认。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p>常见混淆来源：</p>
- 误把 SVG 的
<feturbulence></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 就可能从氛围感变成视觉干扰。调参时盯着实际设备看，别只信桌面预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
