Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers’ affinity for texture, noise is rarely used in web design.
In this article, we’ll generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG. Alright, let’s make some noise!
The trick is to use an SVG filter to create the noise, then apply that noise as a background. Layer it underneath a gradient, boost the brightness and contrast, and that’s it — you have gradient that gradually dithers away.
The key ingredients
Here’s what we’re working with under the hood:
- SVG turbulence: This is our noise filter.
- Background with gradient and SVG: Next, we drop that filter into CSS as a background image that combines the filter with a CSS gradient.
- Boost brightness and contrast: Then we turn to CSS
filterto increase the brightness and contrast of the noise. - Blend gradients: Finally, we optionally use
mix-blend-modeto further filter out colors and blend gradients together.
Let’s go into detail on each of these parts.
Using SVG turbulence
Within the realm of SVG, we can define filters, and one such filter lets us create Perlin noise. It’s called <feTurbulence> and we can define attributes, such as whether it is “turbulence” or “noise” and how fine or coarse it is. Bence Szabó explains it in much more detail as he demonstrates how it can be used to create patterns.