Grainy Gradients

Browse on Dribbble or Behance and you'll find designers using a simple trick to add texture to images: noise. Adding noise makes originally solid colors or smooth gradients (such as shadows) more realistic. But while designers like textures, noise is rarely used in web design.

This article will use only a small amount of CSS and SVG to generate color noise and add texture to the gradient. OK, let's create some noise!

Interactive playground

Click here to view. The fastest way to understand what is happening is to adjust the parameters that make up the layer.

Tips: SVG noise and CSS gradient

The core technology of this article is based on Chris Pachl's answer to Stack Overflow question: Can you add noise to CSS gradients?

The trick is to create a noise using an SVG filter and then apply that noise as a background. Place it under the gradient to enhance brightness and contrast, and that's it - you get a gradually dispersed gradient.

Main ingredients

Here is what we use behind the scenes:

• SVG turbulence: This is our noise filter.
• Background with gradient and SVG: Next, we put this filter into CSS as a background image that combines the filter and CSS gradient.
• Enhance brightness and contrast: We then turn to CSS filters to increase the brightness and contrast of noise.
• Mix gradients: Finally, we can choose to use mix-blend-mode to further filter the colors and mix the gradients together.

Let's go into each of these sections in detail.

Using SVG turbulence

In the SVG realm, we can define filters, one of which allows us to create Perlin noise. it's known<feturbulence></feturbulence> , we can define attributes such as whether it is "turbulence" or "noise", and how fine or rough it is. Bence Szabó explains this in more detail, as he demonstrates how to use it to create patterns.

<code><svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feturbulence basefrequency="0.65" numoctaves="3" stitchtiles="stitch" type="fractalNoise"></feturbulence></filter><rect filter="url(#noiseFilter)" height="100%" width="100%"></rect></svg></code>

This SVG example creates a filter and renders a<rect></rect> elements, which we can use for our granular gradients. Please note that SVG<filter></filter> and<rect></rect> Definition separately, and<rect></rect> Just quote it.

Try changing<feturbulence></feturbulence> some attributes of .

We save this SVG as a separate file. We reference external links in the demo in this article to get SVG. However, in practice, you will reference a local file or your own CDN. For some weird reason, referencing SVGs through its ID doesn't work, but you can inline the SVGs as we've shown in the playground demo. We don't do this in the demo for legibility reasons.

Create CSS background with SVG and gradient

After storing the SVG file in somewhere that can reference it by URL or path, we can now use it in the CSS background, combined with gradients.

 <code>.noise { /* ... */ background: linear-gradient(to right, blue, transparent), url(//m.sbmmt.com/link/a41a6a3856ee3c8c2816d4828b64f560); }</code>

The order here is very important. In this particular example, we want the solid color (i.e. no noise) to transition to the noise and then to another color. We also want one end of the gradient to be transparent so that the noise can be revealed.

Like this:

However, this is not particularly good because the noise is too confusing. We need to mess it up and make it rougher . We can pass...

Enhanced brightness and contrast

Adding a CSS filter makes the noise more vivid, pushing the dimest color toward white or black. Filters are applied throughout<div> , so the blue on the far left is different from the pure blue we started using. ``` .noise { / <em>...</em> / background: linear-gradient(to right, blue, transparent), url( <a href="//m.sbmmt.com/link/a41a6a3856ee3c8c2816d4828b64f560">//m.sbmmt.com/link/a41a6a3856ee3c8c2816d4828b64f560</a> ); filter: contrast(170%) brightness(1000%);<br> }<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;您可以随意调整对比度和亮度如何影响渐变。增强亮度和对比度会在下面的演示中突出混乱的灰色。 #### 噪点颜色不均匀如果您放大，您会注意到噪点由多种颜色组成。SVG滤镜一开始就是彩色的，增加亮度和对比度会强调某些颜色。虽然几乎看不出来，但如果这种五彩纸屑不受欢迎，我们可以继续使用CSS混合（即mix-blend-mode和background-blend-mode）过滤颜色。 #### CSS混合让我们创建一个在两种颜色之间过渡的颗粒状渐变。CSS混合允许我们堆叠颜色层。在下一个示例中，我们向标记中添加另一个`&lt;/code&gt; , place it on top of the original gradient, and apply `mix-blend-mode: multiply;` to smooth things out.</pre><div class="contentsignin">Copy after login</div></div> </div> <p></p> <div> <div></div> <div></div> </div>

<code></code>

.noise { / ... / background: linear-gradient(20deg, rebeccapurple, transparent), url( //m.sbmmt.com/link/a41a6a3856ee3c8c2816d4828b64f560 ); contrast(170%) brightness(1000%); } .overlay { / ... / background: moccasin; mix-blend-mode: multiply; }

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

/ Same as before /

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

 <code>### 一些用例我们已经查看了一个如何制作噪点渐变的非常简单的示例，但是您可以在哪里使用它呢？让我们考虑几个用例。 #### 光线和阴影，带颗粒感渐变自然发生在哪里？例如，光线和阴影。我们可以利用CSS属性`mix-blend-mode`来平滑地混合渐变并选择性地过滤我们想要在噪点中看到的颜色。在“阴影”示例中，我们创建一个暗渐变，并将其反转以在“光线”示例中创建效果。在这两种情况下，`mix-blend-mode`都允许我们将它与其他渐变混合。 #### 全息箔大幅度的亮度和对比度增强创造了一种彩虹效果，让人联想起全息箔。 ### 进一步发展尝试游乐场并随意调整不同的参数，看看它们如何影响纹理。除此之外，以下是一些继续摆弄此技术的几种方法： - **使用不同的SVG:** 本文中的所有渐变都使用相同的SVG，但您可以调整生成噪点的参数以调整粗糙度以及游乐场中的外观和感觉。 - **尝试不同的渐变:** 除了`linear-gradient`之外，CSS还提供四种类型的渐变。你能说出它们的名字吗？（这是一个。） - **添加更多图层:** 使用CSS混合，您可以根据需要堆叠任意数量的图层并将它们混合在一起。 - **应用不同的SVG滤镜:** 有各种各样的滤镜，包括高斯模糊和不同类型的照明。此外，它们可以在CSS滤镜中引用并应用于除SVG之外的*任何*元素。您还能想到什么？请在评论中告诉我们您的发现。 ### 浏览器支持我们不能避免在这里谈论浏览器支持。此技术的核心受所有现代浏览器支持。正如您可能预期的那样，它在Internet Explorer中不起作用。也就是说，Internet Explorer确实支持SVG作为CSS中的背景（只是不支持实际的CSS滤镜属性）。 #### SVG作为CSS背景图像此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。 #### 桌面</code><thead><tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr></thead><tbody><tr>
<td title="Chrome -"></td>
<td title="Firefox -"></td>
<td title="IE -"></td>
<td title="Edge -"></td>
<td title="Safari -"></td>
</tr></tbody>

#### Mobile/Tablet 

The above is the detailed content of Grainy Gradients. For more information, please follow other related articles on the PHP Chinese website!