噪点渐变背景生成器
在线免费噪点渐变背景生成器，SVG feTurbulence 本地生成噪点纹理叠加渐变，可复制CSS或下载背景图，浏览器本地处理。
渐变
135°
噪点
30%
120%
CSS
.noise-gradient {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'256'%20height%3D'256'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.8'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"), linear-gradient(135deg, #0f172a, #3b82f6, #22d3ee);
background-size: 120px 120px, cover;
background-blend-mode: overlay, normal;
}💡 噪点纹理由 SVG feTurbulence 在本地生成，无需外部图片
💡 噪点大小指纹理的重复尺寸，数值越大颗粒越粗
常见问题
噪点是怎么实现的？
用 SVG feTurbulence 滤镜生成随机噪点纹理，通过 data URI 内联，不需要任何外部图片，缩放不失真。
能下载成图片吗？
当前版本支持复制 CSS 代码直接使用；如需图片可以把页面截图或用浏览器开发者工具导出合成后的背景。
和纯渐变有什么区别？
噪点能消除渐变的色带（banding），让过渡更细腻高级，是近年网页设计的流行手法。