这是目前为止最简单最好的实现方式。它是纯CSS的，非常非常简单，没有额外的文件-什么都没有。好吧，这不是最好的方式，但它工作得很好，非常可靠（在非常旧的浏览器上测试时从未失败过），加载速度非常快。
几个月前发现了它，并一直使用它，只需将此代码复制并粘贴到您的CSS中。

background-image: url(data:image/png;base64,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);

然后添加背景色

background-color:#0094d0;

演示：JSFiddle
来源：https://coderwall.com/p/m-uwvg

使用SVG滤镜和CSS渐变创建纹理（杂色）

你想在你的梯度噪音？你很幸运!
Perlin noise是一种渐变噪点。SVG标准指定了一个名为<feTurbulence>的过滤器原语，它实现了Perlin函数。它允许合成人工纹理，如云或大理石-您想要的噪点。

步骤1：定义SVG图形

创建一个名为noise.svg的小SVG文件。

<svg
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'
  width='300' height='300'>

    <filter id='n' x='0' y='0'>
            <feTurbulence
              type='fractalNoise'
              baseFrequency='0.75'
              stitchTiles='stitch'/>
    </filter>

    <rect width='300' height='300' fill='#fff'/>
    <rect width='300' height='300' filter="url(#n)" opacity='0.80'/>
</svg>

此图形定义了两个矩形。第一个矩形用纯色填充。第二个矩形应用了杂色滤镜后呈半透明。第二个矩形覆盖在第一个矩形上以提供杂色效果。

SVG选项

1.首先，最明显的是你可以改变图形的尺寸，但是CSS的background-repeat属性可以用来填充一个元素，因此300 × 300应该足够了。
1.过滤器的type属性可以是fractalNoise或turbulence，它指定了过滤器函数，两者都提供了不同的视觉效果，但在我看来，噪音过滤器更微妙一些。
1.滤镜的baseFrequency属性可以在0.5 - 0.9之间变化，以分别提供从纹理到精细纹理的过程。在我看来，这个范围在视觉上对任何一个滤镜都是最佳的。
1.第一个矩形的fill可以被改变以提供不同的基色。然而，稍后，我们本质上将这个颜色与半透明的CSS渐变相结合，它也定义了一个颜色。所以白色是一个很好的起点。
1.第二个矩形的opacity可以在0.2 - 0.9的范围内设置滤镜强度，其中数值越大，强度越大。
现在，你可以调整前面提到的选项，通过CSS把这个噪点图形设置为背景图像，然后就到此为止了，但是如果你想要一个渐变，比如OP，那就去第二步。

步骤2：应用CSS渐变

使用background-image属性，可以将SVG噪声图形设置为任何元素的背景并覆盖gradient。在本例中，我将噪声图形应用于整个主体并覆盖linear gradient。

body {
    /* white to black linear noise gradient spanning from top to bottom */
    background:
      linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)),
      url('noise.svg');
}

• linear-gradient（）* 函数创建一个伪图像，叠加在 * noise. svg * 的上面，结果是一个半透明的渐变，我们的噪声透过它显示出来。

CSS选项

1.首先，也是最明显的一点是，定义的渐变颜色可以更改。但是，如果您希望使用不带渐变的纯色，请使两个端点颜色相等。这样做的好处是，您可以在整个网站或项目中使用带或不带渐变的同一噪声图形。
1.使用*-gradient() functions创建的多个图像可以叠加在噪声图形上，并且可以在单个渐变函数中指定两个以上的颜色参数和Angular ，以提供各种炫酷的视觉效果。
1.渐变参数的不透明度--即rgba（）和hsla（）--可以增加以增强定义的颜色并降低噪声水平。同样，0.2 - 0.9是一个理想的范围。

结论

这是一个高度可定制的轻量级（~400字节）解决方案，允许您简单地定义任何颜色或渐变的噪声。虽然这里有几个旋钮可以旋转，但这只是开始。还有其他SVG过滤器原语，如<feGaussianBlur>和<feColorMatrix>，可以提供额外的结果。

目前css中还没有给背景添加“噪音”的方法。
另一种解决方案是在图形编辑器中创建一个透明的噪点png，然后将该图形作为背景应用到<div>上，然后需要将该<div>放置在<body>的整个区域上，这样就可以给予出带有噪点的渐变外观。

为了新颖起见，下面是一些没有使用数据URI的纯CSS噪声：

#box {
  width:250px;
  height:250px;
  position:relative;
  background-size:55px 10px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%); 
}
#box::before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:12px 22px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%),  -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%);
  left:0;
  z-index:998;
}
#box::after {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:15px 13px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%);
  left:0;
  top:0;
  z-index:999;
}

<div id="box"></div>

有关如何创建的更多信息：http://jollo.org/LNT/public/css-noise.html

虽然这不符合真正的噪声，但纯CSS3方法将使用多个重复线性背景选择器，这通常用于模式发生器中。
以下是一些例子：

• http://jsfiddle.net/andrewodri/eMB6E/
• http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
• http://lea.verou.me/css3patterns/

通过背景、Angular 、色标和透明度的正确组合，应该可以实现合理的类似噪声的效果：）
希望这能让你走上正确的方向。

是的，目前还没有基于CSS的噪点纹理生成方法。不过，如果你坚持使用编程（而不是基于图像）的方法，你可以尝试使用HTML5画布。这里有一个教程介绍如何使用JavaScript生成噪点--〉Creating Noise in HTML5 Canvas
然而，使用Canvas方法会给访问者带来慢得多的体验，因为A）JavaScript是一种解释性语言，B）使用JS编写图形会特别慢。
所以，除非你想用HTML5来表达自己的观点，否则我还是会坚持使用图片，因为它会更快（无论是你制作还是用户加载），而且你对外观的控制也会更好。

现在是2023年，我的答案是：最好的选择是一个轻量级的内嵌SVG过滤器和一个CSS声明...其中包括背景渐变。没有外部文件，没有base64-ing任何东西。另外，它做了很好的工作，保持非颗粒状渐变，因为它不搞砸它的对比度或亮度。

• • SVG**过滤器如下所示：

<svg width='0' height='0'>
  <filter id='grainy' x='0' y='0' width='100%' height='100%'>
    <feTurbulence type='fractalNoise' baseFrequency='.537'/>
    <feColorMatrix type='saturate' values='0'/>
    <feBlend in='SourceGraphic' mode='multiply'/>
  </filter>
</svg>

• • CSS**代码如下所示：

background: filter(radial-gradient(circle, red, tan), url(#grainy))

有什么条件？
好吧，在这一点上它在任何地方都不起作用（2023年1月初），不过它应该很快就能在Safari上运行了。Safari是唯一一个实现了filter()功能的浏览器，它允许我们只在background-image层上应用filter，* 而不会影响元素的文本内容或后代 *。现在，即使在Safari上，它只适用于url()图像，尽管它很快也会适用于CSS渐变。
我们仍然可以做到这一点，它的工作跨浏览器：

background: radial-gradient(circle, mediumturquoise, darkslateblue);
filter: url(#grainy)

• • 一个

但是，如上所述，这个filter会影响设置它的整个元素，包括后代和文本内容。
为了避免这种情况，我们需要将pseudo上的background和filter声明绝对定位到其父对象的内容后面，覆盖整个父对象的区域-live demo。
这是很容易做到的和跨浏览器的，但它仍然会更好地支持filter()函数，而不是使用了一个伪只是为了这一点，并减少了CSS所需的~15%，我们现在必须写这个变通方案。
下面是其他浏览器中的错误链接：

• Chrome
• Firefox

还有一件事如果你真的不需要颗粒感，视觉增强效果会更好，你可以将渐变存储在一个--grad自定义属性中，并具有：

div {
    --grad: radial-gradient(circle, mediumturquoise, darkslateblue);
    background: var(--grad);
    
    @supports (background: filter(conic-gradient(red, tan), blur(1px))) {
        background: filter(var(--grad), url(#grainy))
    }
}

对于任何感兴趣的人，分解SVG过滤器：

• 这个svg的存在只是为了包含filter，它实际上并不用于显示任何内容，因此我们将它的维度归零（理想情况下，也可以将它从CSS中的position: absolute流中移除）;当它是内联的时候，它上面没有其他属性是必需的（如果你想把它移动到一个外部文件，你必须添加xmlns='http://www.w3.org/2000/svg'）
• filter显然需要引用id，但是默认情况下，过滤效果也会溢出（与feTurbulence相关）10%在每个方向上应用到的元素外部（x和y的默认值为-10%，width和height的默认值为120%），因此我们希望将其限制为仅元素的区域，从0%到100%（或者，如果您不想设置所有这些属性，我猜您可以在CSS中设置clip-path: inset(0);注意，overflow: hidden不会剪切它，因为这只会隐藏溢出到padding-box * 之外的 * 元素的内容，而不会隐藏实际元素上的图形效果，例如filter生成的效果）
• 第一滤波器基元创建噪声层;我真的不明白这是如何工作的-有很多人推荐的this article，但它失去了我，一旦它从1D到2D;我注意到，最好从默认的type值（turbulence）切换到fractalNoise，并且baseFrequency值越小，噪声的颗粒度越细（另外，不要使用整数-使用7.01，但不要使用7）
• 第二滤波器基元完全去饱和其输入（等效于grayscale(1)或saturate(0)的效果）;因为我们没有明确指定输入，它默认使用前一个过滤器原语的结果-噪声层;为此，它将feColorMatrix的默认值type（即matrix）切换为saturate，并将values设置为0（如果您对HSL model/bicone有一个良好的心理印象，您就会知道0%的饱和度意味着我们总是有灰色;多亮或多暗，这取决于亮度，"HSL"中的"L"）
• 第三也是最后一个滤波器基元将去饱和噪声与应用滤波器的元素混合; feBlend接受两个输入，其中一个设置为"SourceGraphic"（注意大写字母很重要!），而另一个默认使用前一个filter原语的结果;最后，我们使用的mode是multiply（这是两层的% RGB values的乘积，逐个像素）

这就是过滤器所需要的一切。没有你不需要的东西。
很多时候，SVG生成器会生成很多不必要的属性，但这是手写的，我只包含了它跨浏览器工作所真正需要的属性。

基于克林特Pachl的回答，我使用CSS的mix-blend-mode来获得更好的颗粒效果，并选择性地增加组成渐变的颜色。
有关示例代码，请参见https://jsfiddle.net/jimmmy/2ytzh30w/。

更新：我在CSS技巧中写了一篇关于它的文章：Grainy Gradients

单独使用CSS生成噪点纹理是不可能的（即使可以，也需要大量的代码技巧）。没有任何新的CSS3属性可以提供这种开箱即用的效果。一个更快的解决方案是使用Photoshop这样的图形编辑器。