颗粒渐变

浏览 Dribbble 或 Behance，您会发现设计师使用一种简单的技巧为图像添加纹理：噪点。 添加噪点会使原本纯色的颜色或平滑的渐变（例如阴影）更加逼真。 但是，尽管设计师喜欢纹理，但噪点很少用于网页设计。

在本文中，我们将生成彩色噪点，仅使用少量 CSS 和 SVG 即可为渐变添加纹理。 好吧，让我们制造一些噪音！

交互式游乐场

在这里查看。 了解正在发生的事情的最快方法是玩弄构成图层的参数。

技巧：SVG 噪点和 CSS 渐变

本文中的核心技术建立在 Chris Pachl 对 Stack Overflow 的一个答案之上，这个问题是：您能为 CSS 渐变添加噪点吗？

技巧是使用 SVG 过滤器来创建噪点，然后将该噪点作为背景应用。 将其叠加在渐变下方，提高亮度和对比度，就是这样——您就拥有了逐渐变模糊的渐变。

关键要素

以下是在幕后使用的东西

• SVG 湍流： 这是我们的噪点过滤器。
• 带有渐变和 SVG 的背景： 接下来，我们将该过滤器作为背景图像放入 CSS 中，该背景图像将过滤器与 CSS 渐变结合在一起。
• 提高亮度和对比度： 然后，我们转向 CSS filter 来增加噪点的亮度和对比度。
• 混合渐变： 最后，我们可以选择使用 mix-blend-mode 来进一步过滤颜色并混合渐变。

让我们详细介绍这些部分的每一个。

使用 SVG 湍流

在 SVG 领域，我们可以定义 过滤器，其中一个过滤器允许我们创建 Perlin 噪点。 它被称为 <feTurbulence>，我们可以定义属性，例如它是“湍流”还是“噪点”，以及它是多么精细或粗糙。 Bence Szabó 更详细地解释了它，因为它展示了它如何用于创建模式。

<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch' />
  </filter>

  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

此 SVG 示例创建了一个过滤器并呈现了一个 <rect> 元素，我们可以将其用于我们的颗粒渐变。 请注意，SVG <filter> 是与 <rect> 分别定义的，而 <rect> 只是引用了它。

随意更改<feTurbulence> 的一些属性。

我们将此 SVG 保存为单独的文件。 在本文中的演示中，我们引用了外部链接来获取 SVG。 然而，在实践中，您将引用本地文件或您自己的 CDN。 出于某种奇怪的原因，它无法通过其 id 在 CSS 中引用 SVG，但您可以 将 SVG 内联，正如我们在 游乐场演示 中所展示的。 出于可读性的原因，我们在演示中不这样做。

创建带有 SVG 和渐变的 CSS background

在我们将 SVG 文件存储在某个地方之后，我们可以通过 URL 或路径引用它，现在我们可以在 CSS background 中使用它，并与渐变结合在一起。

.noise {
  /* ... */
  background:
    linear-gradient(to right, blue, transparent),
    url(https://grainy-gradients.vercel.app/noise.svg);
}

这里的顺序很重要。 在此特定示例中，我们希望纯色（即无噪点）过渡到噪点，然后过渡到另一种颜色。 我们还希望渐变的一端是透明的，以便噪点透出来。

像这样

然而，这并不特别好，因为噪点太模糊了。 我们需要将其弄乱并使其更颗粒。 我们可以通过…

提高亮度和对比度

添加 CSS filter 会使噪点更加明显，将最暗淡的颜色推向白色或黑色。 过滤器应用于整个 <div>，因此最左边的蓝色与我们开始使用的纯蓝色不同。

.noise {
  /* ... */
  background: 
    linear-gradient(to right, blue, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg);
  filter: contrast(170%) brightness(1000%);  
}

您可以随意玩弄对比度和亮度对渐变的影响。 提高亮度和对比度会突出以下演示中模糊的灰色。

噪点不是均匀的

如果您放大，您会注意到噪点由多种颜色组成。 SVG 过滤器最初是彩色的，提高亮度和对比度会强调某些颜色。 虽然几乎看不出来，但如果这种五彩纸屑不受欢迎，我们可以继续使用 CSS 混合（即 mix-blend-mode 和 background-blend-mode）来过滤掉颜色。

CSS 混合

让我们创建一个在两种颜色之间过渡的颗粒渐变。 CSS 混合允许我们叠加颜色层。 在下一个示例中，我们将在标记中添加另一个 <div>，将其定位在原始渐变之上，然后应用 mix-blend-mode: multiply; 来使事物变得平滑。

<section>
  <div class="isolate">
    <div class="noise"></div>
    <div class="overlay"></div>
  </div>
</section>

.noise {
  /* ... */
  background: 
    linear-gradient(20deg, rebeccapurple, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg); 
  contrast(170%) brightness(1000%);
}
.overlay {
  /* ... */
  background: moccasin;
  mix-blend-mode: multiply;
}

我们可以使用 CSS isolation 属性来创建一个新的堆叠上下文并选择要混合的内容。 如果我们在下一个示例中省略 isolation，渐变和叠加层将与背景颜色混合。 在 Pen 中尝试一下，并注释掉该行！

/* Same as before */

.isolate {
  isolation: isolate;
  /* ... */
}

一些用例

我们已经看过了如何制作一个简单的噪点渐变，但你可能在哪里使用它？ 让我们考虑几个用例。

光影，带有颗粒感

渐变自然发生在哪里？ 首先，光影。 我们可以利用 CSS 属性 mix-blend-mode 来平滑地混合渐变并选择性地过滤掉我们想要在噪点中看到的颜色。

在“阴影”示例中，我们创建了一个深色渐变，并将其反转以在“光”示例中创建效果。 在这两种情况下，mix-blend-mode 允许我们将其与其他渐变混合。

全息箔

大幅提高亮度和对比度会产生彩虹效果，让人联想到全息箔。

更进一步

试试 这个游乐场，并尝试不同的参数，看看它们如何影响纹理。

除此之外，这里有一些方法可以继续使用这种技术

• 使用不同的SVG： 本文中的所有渐变都使用相同的SVG，但您可以调整生成噪声的参数，以调整粗糙度以及 这个游乐场中的外观和感觉。
• 尝试不同的渐变： 除了linear-gradient，CSS还提供四种其他类型的渐变。你能说出它们的名字吗？（这是一个。）
• 添加更多层： 使用CSS混合，您可以根据需要叠加任意数量的层并将其混合。
• 应用不同的SVG滤镜： 有各种各样的滤镜，包括高斯模糊和不同类型的照明。此外，它们可以在CSS滤镜中引用，并应用于任何元素，除了SVG之外。

你还能想到什么？请在评论中告诉我们你的发现。

浏览器支持

我们无法逃避这里有关浏览器支持的讨论。这项技术的核心在所有现代浏览器中都得到支持。正如你所料，它在Internet Explorer中不起作用。也就是说，Internet Explorer确实支持在CSS中使用SVG作为背景（只是不支持实际的CSS filter属性）。

SVG作为CSS背景图像

CSS滤镜效果

我还注意到，基于Blink的浏览器（例如Chrome）和基于WebKit的浏览器（例如Safari）对mix-blend-mode的实现略有不同，因此请确保在使用CSS混合时跨浏览器测试。在我的项目中，我使用了浏览器特定的媒体查询，通过对CSS进行小的调整来手动协调视觉差异。

---

就是这样！现在您已经掌握了SVG滤镜以及如何将它们与CSS滤镜作为背景结合使用，您又多了一种巧妙的视觉效果，可以为设计添加深度和纹理。