Comments on: Grainy Gradients

By: Petr Haluza

Petr Haluza — Tue, 19 Mar 2024 12:41:07 +0000

I needed a more simpliest solution, so i used only one :before css line to achieve this: https://jsfiddle.net/PetrHaluza/jre3dxhq/

By: F

Mon, 17 Jan 2022 21:38:20 +0000

By relying on extreme contrast and brightness, this methods forgoes a huge range of colors. Using a mask is a much more effective way of achieving this effect.

By: Thomas Rettig

Thomas Rettig — Tue, 05 Oct 2021 13:34:57 +0000

If only this trick didn’t have to suck performance-wise…

By: Ryan Killeen

Ryan Killeen — Fri, 01 Oct 2021 18:54:31 +0000

Ever since I read this article, I can’t help but wonder if you could use this grainy noise effect as a mask on the edge of a div.

If any SVG wizards want to give it a whirl, let me know!

By: sowg

sowg — Tue, 28 Sep 2021 06:21:10 +0000

Can you use two colours that look familiar for Grainy Gradients?

By: Jimmy Chion

Jimmy Chion — Thu, 23 Sep 2021 03:32:52 +0000

In reply to Ian.

Hey Ian – I don’t think you’ll be able to use it with box-shadow, but I tried to create the effect of a box-shadow in this Pen: https://codepen.io/cjimmy/pen/wvexYoJ (I’ve only tested it in Safari. Results may differ with other browsers)

The main idea is that you can add more linear-gradient()s to create a shape and then invert it. I made a border of a box with dark grainy gradients: dark borders, light inside. You can then inverted it: dark rectangle inside, light outside. To remove the light part with mix-blend-mode.

It may not be exactly what you’re seeking, but perhaps it inspires a better method for you. (If so, please do share!)

By: JL Garcia

JL Garcia — Wed, 22 Sep 2021 17:19:34 +0000

I don’t know where, I don’t know how, but I’m going to use this.

By: Ian

Ian — Tue, 21 Sep 2021 10:39:54 +0000

This is really cool (and useful!).

Is it possible to use this technique / effect with CSS box-shadow? Looking for a way to add noise to a drop shadow

By: Calinou

Calinou — Tue, 14 Sep 2021 21:30:41 +0000

Note that adding noise isn’t just just for artistic purposes. Adding subtle noise can also be useful to combat banding when you use long gradients with subtle color changes.

By: Lars Ejaas

Lars Ejaas — Tue, 14 Sep 2021 08:13:31 +0000

Wow! Really cool. I have been playing around with different techniques to create a grainy effect but never thought of svg filters…