Comments on: Grainy Gradients https://css-tricks.com/grainy-gradients/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Mon, 17 Jan 2022 21:38:20 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: F https://css-tricks.com/grainy-gradients/#comment-1788286 Mon, 17 Jan 2022 21:38:20 +0000 https://css-tricks.com/?p=351302#comment-1788286 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 https://css-tricks.com/grainy-gradients/#comment-1783285 Tue, 05 Oct 2021 13:34:57 +0000 https://css-tricks.com/?p=351302#comment-1783285 If only this trick didn’t have to suck performance-wise…

]]> By: Ryan Killeen https://css-tricks.com/grainy-gradients/#comment-1783170 Fri, 01 Oct 2021 18:54:31 +0000 https://css-tricks.com/?p=351302#comment-1783170 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 https://css-tricks.com/grainy-gradients/#comment-1782978 Tue, 28 Sep 2021 06:21:10 +0000 https://css-tricks.com/?p=351302#comment-1782978 Can you use two colours that look familiar for Grainy Gradients?

]]> By: Jimmy Chion https://css-tricks.com/grainy-gradients/#comment-1782795 Thu, 23 Sep 2021 03:32:52 +0000 https://css-tricks.com/?p=351302#comment-1782795 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 https://css-tricks.com/grainy-gradients/#comment-1782755 Wed, 22 Sep 2021 17:19:34 +0000 https://css-tricks.com/?p=351302#comment-1782755 I don’t know where, I don’t know how, but I’m going to use this.

]]> By: Ian https://css-tricks.com/grainy-gradients/#comment-1782685 Tue, 21 Sep 2021 10:39:54 +0000 https://css-tricks.com/?p=351302#comment-1782685 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 https://css-tricks.com/grainy-gradients/#comment-1782416 Tue, 14 Sep 2021 21:30:41 +0000 https://css-tricks.com/?p=351302#comment-1782416 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 https://css-tricks.com/grainy-gradients/#comment-1782394 Tue, 14 Sep 2021 08:13:31 +0000 https://css-tricks.com/?p=351302#comment-1782394 Wow! Really cool. I have been playing around with different techniques to create a grainy effect but never thought of svg filters…

]]>