{"id":351302,"date":"2021-09-13T12:04:51","date_gmt":"2021-09-13T19:04:51","guid":{"rendered":"https:\/\/css-tricks.com\/?p=351302"},"modified":"2021-09-14T15:42:44","modified_gmt":"2021-09-14T22:42:44","slug":"grainy-gradients","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/grainy-gradients\/","title":{"rendered":"Grainy Gradients"},"content":{"rendered":"\n

Browse through Dribbble or Behance, and you\u2019ll 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\u2019 affinity for texture, noise is rarely used in web design.<\/p>\n\n\n\n

In this article, we\u2019ll generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG. Alright, let\u2019s make some noise!<\/p>\n\n\n\n\n\n\n\n

\n
\n
\"\"
Illustration by Hank Washington on Behance<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Illustration by Jordan Kay on Dribbble<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n

Interactive playground<\/h3>\n\n\n

Check it out here<\/a>. The quickest way to understand what\u2019s happening is to play with the parameters that make up the layers.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n

The trick: SVG noise and CSS gradients<\/h3>\n\n\n
\"\"<\/figure>\n\n\n\n

The core technique in this article is built on top of a Stack Overflow answer by Chris Pachl to the question: Can you add noise to a CSS gradient?<\/a><\/p>\n\n\n\n

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\u2019s it\u2009\u2014\u2009you have gradient that gradually dithers away.<\/p>\n\n\n

The key ingredients<\/h4>\n\n\n

Here\u2019s what we\u2019re working with under the hood:<\/p>\n\n\n\n

  • SVG turbulence:<\/strong> This is our noise filter.<\/li>
  • Background with gradient and SVG:<\/strong> Next, we drop that filter into CSS as a background image that combines the filter with a CSS gradient.<\/li>
  • Boost brightness and contrast:<\/strong> Then we turn to CSS filter<\/code> to increase the brightness and contrast of the noise.<\/li>
  • Blend gradients:<\/strong> Finally, we optionally use mix-blend-mode<\/code> to further filter out colors and blend gradients together.<\/li><\/ul>\n\n\n\n

    Let\u2019s go into detail on each of these parts.<\/p>\n\n\n

    Using SVG turbulence<\/h4>\n\n\n

    Within the realm of SVG, we can define filters<\/a>, and one such filter lets us create Perlin noise. It\u2019s called <feTurbulence><\/code><\/a> and we can define attributes, such as whether it is \u201cturbulence\u201d or \u201cnoise\u201d and how fine or coarse it is. Bence Szab\u00f3 explains it in much more detail<\/a> as he demonstrates how it can be used to create patterns.<\/p>\n\n\n\n

    <svg viewBox=\"0 0 200 200\" xmlns='http:\/\/www.w3.org\/2000\/svg'>\n  <filter id='noiseFilter'>\n    <feTurbulence \n      type='fractalNoise' \n      baseFrequency='0.65' \n      numOctaves='3' \n      stitchTiles='stitch' \/>\n  <\/filter>\n\n  <rect width='100%' height='100%' filter='url(#noiseFilter)' \/>\n<\/svg><\/code><\/pre>\n\n\n\n
    This SVG example creates a filter and renders a <rect><\/code> element that we can use for our grainy gradients. Notice that the SVG <filter><\/code> is defined separately from the <rect><\/code>, and the <rect><\/code> simply references it.<\/p>\n\n\n\n
    Play around<\/a> with changing some of the properties of <feTurbulence><\/code><\/p>\n\n\n\n