{"id":6066,"date":"2025-06-13T09:37:36","date_gmt":"2025-06-13T14:37:36","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6066"},"modified":"2025-06-23T10:50:20","modified_gmt":"2025-06-23T15:50:20","slug":"grainy-gradients","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/grainy-gradients\/","title":{"rendered":"Grainy Gradients"},"content":{"rendered":"\n

You know when you set a background<\/code> gradient or a gradient mask<\/code> and you get an ugly banding<\/a> effect? If you can’t picture what I mean, here’s an example:<\/p>\n\n\n\n

\"A
 example gradient with banding<\/figcaption><\/figure>\n\n\n\n

Previous Solutions<\/a><\/h2>\n\n\n\n

Over time, I’ve seen a couple of approaches commonly recommended for solving this. The first is to simply introduce more stops<\/a> (gradient “easing”), which I’m not really keen on doing, even if I can just generate them in a Sass loop and never need to know about them. The second one is to make the gradient noisy<\/a>. Let’s do that.<\/p>\n\n\n\n

The way I first went about making gradients grainy was to have a gradient layer and a noise layer (using pseudo-elements for the layers) and then blend them together. I first did this in response to a question<\/a> asked on X. That video became one of my most watched ones ever, which isn’t something I’m happy about anymore because I’ve come to find that technique to be overly complicated, like scratching behind the right ear with the left foot.<\/p>\n\n\n\n

A few months later, I saw an article<\/a> that was doing something similar: placing a gradient layer and a noise layer one on top of the other. Unlike my approach, it wasn’t blending the two layers and instead was relying on one end of the gradient being transparent to allow the noise to show through. For the other end to be something other than transparent, it would layer an overlay and blend it. Just like my layered pseudos approach… too complicated! Not to mention that the contrast()<\/code> and brightness()<\/code> tampering (meant to highlight the grain) make this only work for certain gradient inputs and they greatly alter the saturation and luminosity of the original gradient palette.<\/p>\n\n\n\n

In time, I would improve upon my initial idea and, almost half a decade later, I would make a second video<\/a> on the topic, presenting a much simplified technique. Basically, the gradient would get fed into an SVG filter<\/code>, which would generate a noise layer, desaturate it and then place it on top of the input gradient. No external files, no base64-ing anything, no separate (pseudo)element layers for the noise and the gradient.<\/p>\n\n\n\n

Still, it didn’t take long before I wasn’t happy with this solution anymore, either.<\/p>\n\n\n\n

The big problem with layering the noise and the gradient<\/a><\/h2>\n\n\n\n

The problem with all of these solutions so far is that they’re changing the gradient. Depending on the particular technique we use, we always end up with a gradient that’s either darker, brighter, or more saturated than our original one.<\/p>\n\n\n\n