Post

I'm currently experimenting with CSS and SVG filter effects. This one is based on the "Grainy Gradients" tutorial: css-tricks.com/grainy-gradi... The goal is to get a print-dithering like effect. I also added a few more color splots to make it even more organic. #generative #generativeart #css

bleeptrack

@bleeptrack.de

11h

The base is a SVG file defining the noise. This one is created with two feTurbulence tags. It gets then applied as the background of the shape.

bleeptrack

@bleeptrack.de

11h

Additionally to the noise background we also want to have a gradient.

bleeptrack

@bleeptrack.de

11h

Now it gets interesting: if we crank up contrast and brightness, we get a small grainy gradient from our noise!

bleeptrack

@bleeptrack.de

11h

To get rid of the right part we can just use a better blending mode like multiply. Also if we let the gradient run from 0.4 to 0.7 instead of from 0 to 1 we can stretch the gradient area to the whole shape if we want that.

bleeptrack

@bleeptrack.de

Problem now is that the contrast and brightness screws with our color if we wanted to have a certain hex value. So far I fix that with a SVG filter, but I find this rater suboptimal. Not sure if there is a nicer way? (and yeah, its called tint-orange but currently tints blue :D)

27/10/26, 8:10 am0 reposts1 like

The Incredible Melting Man

@theincrediblemeltingman.com

Ahh I love this! Absolutely going to s̶t̶e̶a̶l̶ borrow it. 🤩 Have you noticed any performance concerns? Maybe I’m old and outdated, but filters always make me a little nervous.

bleeptrack

@bleeptrack.de

Go for it! There's so stealing, only sharing ;D (Also... I'm mainly tweaking stuff from the tutorial 😅 so I didn't even do much) So far no performance issues but can't say how that behaves with lots of shapes. I share your feelings about filters here 😬