Creating Textures (Noise) Using SVG Filters & CSS Gradients
You want noise in your gradient? You're in luck!
Perlin noise is a type of gradient noise. The SVG standard specifies a filter primitive called <feTurbulence>
, which implements the Perlin function. It allows the synthesis of artificial textures like clouds or marble—the noise you want.
Step 1: Define an SVG Graphic
Create a small SVG file called noise.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>
This graphic defines two rectangles. The first is filled with a solid color. The second is translucent with the noise filter applied. The second rectangle is overlayed on the first to provide a noise effect.
SVG Options
Fist and most obvious is that you can change the dimensions of the graphic. However, the CSS background-repeat
property can be used to fill an element, thus 300×300 should suffice.
The filter's type
attribute can be fractalNoise
or turbulence
, which specifies the filter function. Both provide a different visual, but in my opinion, the noise filter is a little more subtle.
The filter's baseFrequency
attribute can range from 0.5–0.9 to provide a course to fine texture, respectively. This range is visually optimal for either filter in my opinion.
The first rectangle's fill
can be changed to provide a different base color. Later, however, we essentially combine this color with a translucent CSS gradient, which also defines a color(s). So white is a good starting point here.
The second rectangle's opacity
can range from 0.2–0.9 to set the filter intensity, where a higher number increases the intensity.
At this point, you could tweak the aforementioned options, set this noise graphic as a background image via CSS, and call it a day. But if you want a gradient, like the OP, go to Step 2.
Step 2: Apply a CSS Gradient
Using the background-image
property, you can set the SVG noise graphic as the background on any element and overlay a gradient. In this example, I'll apply the noise graphic to the entire body and overlay a 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');
}
The linear-gradient() function creates a pseudo image, which is stacked on top of noise.svg. The result is a translucent gradient with our noise showing through it.
CSS Options
First, and most obvious, is that the defined gradient colors can be changed. However, if you want a solid color without a gradient, make the two end-point colors equal. The benefit is that you can use the same noise graphic with or without a gradient throughout a site or among projects.
Multiple images, created with the *-gradient()
functions, can be overlayed on the noise graphic and more than two color parameters and angles can be specified in a single gradient function to provide all kinds of cool visuals.
The opacity of the gradient parameters—i.e. rgba() and hsla()—can be increased to intensify the defined color and reduce the noise level. Again, 0.2–0.9 is an ideal range.
Conclusion
This is a highly customizable and very light-weight (~400 bytes) solution that allows you to simply define noise of any color or gradient. Although there are several knobs to turn here, this is only the beginning. There are other SVG filter primitives, such as <feGaussianBlur>
and <feColorMatrix>
, which can provide additional results.