如何为linear-gradient背景添加噪点效果？

基于你提供的渐变背景代码，这里有几种直接可用的噪点添加方案：

方法一：内联SVG噪点（兼容性优异） #

利用SVG的feTurbulence滤镜生成噪点，直接嵌入到background-image中，和原有渐变叠加：

body{
  height: 100vh;
  background:
    /* 噪点层 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    /* 原有渐变层 */
    linear-gradient(red, transparent ),
    linear-gradient(to top left, blue, transparent),
    linear-gradient(to top right, rgb(124, 211, 134), transparent );
  background-blend-mode: overlay, screen, screen, screen;
  background-size: cover;
}

• 调整baseFrequency可以控制噪点密度：数值越小，噪点越细腻
• numOctaves控制噪点的复杂度，数值越高噪点层次越多
• background-blend-mode中第一个值对应噪点层的混合模式，确保噪点自然融入渐变色彩

方法二：纯CSS圆锥渐变噪点（无需外部资源） #

用repeating-conic-gradient生成随机细小色块模拟噪点，纯CSS实现：

body{
  height: 100vh;
  background:
    /* 噪点层 */
    repeating-conic-gradient(rgba(0,0,0,0.05) 0deg 2deg, transparent 2deg 5deg),
    /* 原有渐变层 */
    linear-gradient(red, transparent ),
    linear-gradient(to top left, blue, transparent),
    linear-gradient(to top right, rgb(124, 211, 134), transparent );
  background-blend-mode: overlay, screen, screen, screen;
  background-size: cover;
}

• 修改rgba(0,0,0,0.05)的透明度和颜色，可调整噪点的深浅和色调
• 调整角度参数（0deg 2deg、2deg 5deg）可以控制噪点的大小和分布密度

方法三：伪元素叠加噪点（不改动原有背景代码） #

如果不想修改原有背景的结构，用伪元素在页面顶部叠加噪点层：

body{
  height: 100vh;
  background:
    linear-gradient(red, transparent ),
    linear-gradient(to top left, blue, transparent),
    linear-gradient(to top right, rgb(124, 211, 134), transparent );
  background-blend-mode: screen;
  position: relative;
}

body::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.1; /* 调整噪点明显程度 */
  pointer-events: none; /* 不干扰页面交互 */
}

• 通过opacity直接控制噪点的透明度，数值越小噪点越淡
• pointer-events: none确保噪点层不会影响页面上的按钮、链接等交互元素

内容的提问来源于stack exchange，提问作者Nora