你能给CSS渐变添加噪波吗？

CSS中有没有可能给渐变添加噪点？

这是我的径向渐变代码:

body {
    color: #575757;
    font: 14px/21px Arial, Helvetica, sans-serif;
    background-color: #2f3b4b;
    background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%);
    background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63));
}

我会在上面添加什么噪声，给它纹理？

这是迄今为止最省事、最好的实现方式。这是纯粹的CSS，做起来非常非常简单，没有额外的文件-什么都没有。好吧，这可能不是最好的方法，但它工作得非常好，非常可靠(在非常旧的浏览器上测试时从未失败)，并且加载非常快。

几个月前找到它，并一直使用它，只需将这段代码复制并粘贴到您的CSS中。

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

然后添加你的背景颜色

background-color:#0094d0;

演示:JSFiddle

来源: https://coderwall.com/p/m-uwvg

你想让你的渐变有噪音吗？你很幸运！

柏林噪声是一种梯度噪声。SVG标准指定了一个名为& lt恶臭& gt，它实现了Perlin函数。它允许合成人造纹理，如云或大理石& mdash你想要的噪音。

步骤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选项首先也是最明显的是，你可以改变图形的尺寸。然而，CSS背景重复属性可以用来填充一个元素，因此300 &300应该够了。

过滤器的类型属性可以是fractalNoise或turbulence，用于指定过滤器功能。两者都提供了不同的视觉，但在我看来，噪声过滤器更微妙一些。

过滤器的基频属性范围为0.5 & ndash0.9，以分别提供精细纹理的过程。在我看来，这个范围对任何一种滤镜都是视觉上的最佳选择。

可以更改第一个矩形的填充以提供不同的基色。然而，后来，我们将这种颜色与半透明的CSS渐变结合起来，这也定义了一种颜色。所以白色是一个很好的起点。

第二个矩形的不透明度范围为0.2 & ndash0.9设定滤镜强度，数值越大，强度越大。

此时，您可以调整前面提到的选项，通过CSS将这个噪声图形设置为背景图像，然后就到此为止。但是，如果你想要一个梯度，像OP，去第2步。

步骤2:应用CSS渐变使用background-image属性，您可以将SVG噪波图形设置为任何元素的背景，并覆盖一个渐变。在这个例子中，我将噪声图形应用到整个身体，并覆盖一个线性梯度。

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选项首先，也是最明显的，定义的渐变颜色是可以改变的。但是，如果您想要没有渐变的纯色，请使两种端点颜色相等。好处是您可以在整个站点或项目中使用带有或不带渐变的相同噪波图形。

使用*-gradient()函数创建的多个图像可以叠加在噪声图形上，并且可以在单个渐变函数中指定两个以上的颜色参数和角度，以提供各种酷炫的视觉效果。

渐变参数的不透明度& mdash即rgba()和HSLA()& mdash；可以增加以增强定义的颜色并降低噪波级别。还是那句话，0.2 & ndash0.9是理想的范围。

结论这是一个高度可定制和非常轻量级(~400字节)的解决方案，允许您简单地定义任何颜色或渐变的噪声。虽然这里有几个旋钮可以转动，但这仅仅是开始。还有其他SVG过滤器原语，如& ltfeGaussianBlur & gt并且& ltfeColorMatrix & gt，这可以提供额外的结果。

在css中目前还没有给背景添加“噪音”的方法。

另一个解决方案是在图形编辑器中创建一个透明的噪声png。然后将该图形作为背景应用于& ltdiv & gt。然后，您需要将& ltdiv & gt在& ltbody & gt这将给出带有噪声的梯度的外观。

出于新奇的考虑，这里是一些没有使用数据URI的纯CSS噪声:

#box {
  width: 250px;
  aspect-ratio: 1;
  position: relative;
  background: 
    repeating-radial-gradient(closest-corner at 1% 21%, rgba(255,0,255,.5), rgba(0,255,255,.5), #000 1.7%), 
    repeating-radial-gradient(closest-corner at 51% 51%, #fff, #fff, rgba(0,255,0,1) 10%);
  background-size: 55px 10px;
}

#box::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: 
    repeating-radial-gradient(closest-corner at 21% 21%, #fff, rgba(0,0,255,.5), rgb(3,0,255) 20%), 
    repeating-radial-gradient(closest-corner at 61% 21%, #fff, rgba(0,255,0,.5), rgb(3,0,255) 20%), 
    repeating-radial-gradient(closest-corner at 91% 51%, #fff, rgba(255,255,1,.5), rgb(055,255,255) 20%);
  background-size: 15px 13px, 12px 22px, 12px 22px;
  background-blend-mode: exclusion, normal;
  mix-blend-mode: exclusion;
  content: ''
}

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

现在是2023年，所以我的答案是:最好的选择是使用轻量级的内嵌SVG过滤器和一个CSS声明...它包括背景渐变。没有外部文件，没有任何基础。此外，它很好地保留了非粒状渐变，因为它不会影响对比度或亮度。

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()函数的浏览器，该函数允许我们仅在背景图像层上应用滤镜，而不会影响元素的文本内容或后代。目前，即使在Safari中，它也只能处理url()图像，尽管它应该很快也能处理CSS渐变。

我们仍然可以做到这一点，它跨浏览器工作:

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

现场演示

但是，如上所述，此过滤器会影响它所设置的整个元素，包括子体和文本内容。

为了避免这种情况，我们需要在一个pseudo上移动背景和过滤器声明，绝对定位在它的父内容后面，覆盖它的整个父内容演示区域。

这很容易做到，而且是跨浏览器的，但是如果支持filter()函数就更好了，不要仅仅为此使用一个pseudo，并且将所需的CSS减少到我们现在使用这种变通方法所需要编写的大约15%。

这里是其他浏览器中的错误链接:

铬

火狐浏览器

还有一件事:如果你真的不需要颗粒感，这只是一个很好的视觉增强，你可以存储梯度在一个梯度自定义属性，并有:

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的存在仅仅是为了包含过滤器，它实际上并不用于显示任何东西，所以我们将它的维度归零(理想情况下，还可以用position: absolute在CSS中将其从流中取出)；当它是内联的时，它不需要其他属性(如果您想将它移动到外部文件，您必须添加xmlns = ' http://www . w3 . org/2000/SVG ')

显然，过滤器需要一个id来引用，但默认情况下，过滤器效果还会在它所应用的元素之外向每个方向溢出10%(x和y的默认值为-10%，宽度和高度的默认值为120%)，因此我们希望将其限制为元素的区域，沿两个轴从0%到100%(或者，如果您不想设置所有这些属性，我猜您可以在CSS中设置clip-path: inset(0 );请注意，overflow: hidden不会剪切它，因为它只会隐藏溢出到填充框之外的元素内容，而不会隐藏实际元素的图形效果，例如由过滤器产生的效果)

第一滤波器图元创建噪声层；我真的不明白这是怎么回事——有一篇文章被很多人推荐，但是一旦它从1D到2D，我就失去了它；我注意到的是，最好从默认类型值(湍流)切换到fractalNoise，基频值越小，噪声的粒度越细(另外，不要使用整数——使用7.01，而不是7)

第二个滤镜图元完全去饱和其输入(相当于灰度(1)或饱和(0)的效果)；由于我们没有明确指定输入，它默认使用之前的过滤器原语的结果——噪声层；为此，它从feColorMatrix(矩阵)的默认类型切换到饱和，并将值设置为0(如果你对HSL模型/双锥形有很好的印象，你会知道0%的饱和度意味着我们总是有一个灰色；有多亮或多暗，这取决于亮度，即& quotHSL & quot)

第三个也是最后一个滤波器图元将去饱和噪声与应用滤波器的元素混合；feBlend接受两个输入，其中一个设置为“SourceGraphic”(注意这些大写字母很重要！)，而另一个默认使用前一个filter原语的结果；最后，我们使用的模式是乘法(将两层的% RGB值逐像素相乘)

这就是过滤器所需要的。里面没有你不需要的东西。

很多时候，SVG生成器会吐出很多不必要的属性，但这是手写的，我只包含了跨浏览器工作真正需要的内容。

虽然这不算真正的噪声，但一个纯粹的CSS3方法会使用多个重复的线性背景选择器，它们通常用在模式生成器中。

这里有几个例子:

http://jsfiddle.net/andrewodri/eMB6E/ http://lea . verou . me/2010/12/checked-stripes-other-background-patterns-with-css3-gradients/ http://lea.verou.me/css3patterns/ 通过背景、角度、色标和透明度的适当组合，应该可以获得合理的类似噪声的效果:)

不管怎样，希望这能让你找到正确的方向...

是的，目前没有基于CSS的方法来处理噪波纹理。但是，如果您执意采用编程(而不是基于图像)的方法，您可以尝试使用HTML5 canvas。这里有一个关于如何使用JavaScript生成噪声的教程->在HTML5画布中创建噪声

然而，使用Canvas方法会给你的访问者带来慢得多的体验，因为A) JavaScript是一种解释型语言，B)使用JS编写图形特别慢。

所以，除非你想通过使用HTML5来表达观点，否则我会坚持使用图片。它会更快(对你和你的用户来说都是如此)，而且你可以更好地控制外观。

基于Clint Pachl的回答，我使用CSS的mix-blend-mode来获得一个颗粒效果，并有选择地突出构成渐变的颜色。

参见https://jsfiddle.net/jimmmy/2ytzh30w/的示例代码。

更新:我在CSS中写了一篇关于它的文章——技巧:粒状渐变

Noise using css

仅仅使用CSS生成噪波纹理是不可能的(即使可能，也需要大量的代码技巧来实现)。没有任何新的CSS3属性提供开箱即用的效果。一个更快的解决方案是使用图形编辑器，如Photoshop。