👋 The demos on this article experiment with a non-standard bug associated to CSS gradients and sub-pixel rendering. Their conduct might change at any time sooner or later. They’re additionally heavy as heck. We’re serving them async the place you click on to load, however nonetheless need to provide you with a heads-up in case your laptop computer fan begins spinning.
Do you keep in mind that static noise on previous TVs with no sign? Or when the sign is dangerous and the image is distorted? In case the idea of a TV sign predates you, right here’s a GIF that exhibits precisely what I imply.
View picture (accommodates auto-playing media)
Sure, we’re going to do one thing like this utilizing solely CSS. Here’s what we’re making:
Earlier than we begin digging into the code, I need to say that there are higher methods to create a static noise impact than the tactic I’m going to indicate you. We are able to use SVG, <canvas>, the filter property, and so on. Actually, Jimmy Chion wrote a good article displaying the way to do it with SVG.
What I can be doing right here is form of a CSS experiment to discover some methods leveraging a bug with gradients. You need to use it in your aspect initiatives for enjoyable however utilizing SVG is cleaner and extra appropriate for an actual mission. Plus, the impact behaves otherwise throughout browsers, so should you’re checking these out, it’s finest to view them in Chrome, Edge, or Firefox.
Let’s make some noise!
To make this noise impact we’re going to use… gradients! No, there isn’t a secret ingredient or new property that makes it occur. We’re going to use stuff that’s already in our CSS toolbox!
The “trick” depends on the truth that gradients are dangerous at anti-aliasing. You realize these form of jagged edges we get when utilizing arduous cease colours? Sure, I discuss them in most of my articles as a result of they’re a bit annoying and we at all times want so as to add or take away a couple of pixels to easy issues out:
As you’ll be able to see, the second circle renders higher than the primary one as a result of there’s a tiny distinction (0.5%) between the 2 colours within the gradient reasonably than utilizing a straight-up arduous shade cease utilizing entire quantity values like the primary circle.
Right here’s one other look, this time utilizing a conic-gradient the place the result’s extra apparent:
An fascinating thought struck me whereas I used to be making these demos. As an alternative of fixing the distortion on a regular basis, why not attempting to do the alternative? I had no thought what would occur but it surely was a enjoyable shock! I took the conic gradient values and began to lower them to make the poor anti-aliasing outcomes look even worse.
Do you see how dangerous the final one is? It’s a form of scrambled within the center and nothing is easy. Let’s make it full-screen with smaller values:
I suppose you see the place that is going. We get a wierd distorted visible once we use very small decimal values for the arduous colours stops in a gradient. Our noise is born!
We’re nonetheless removed from the grainy noise we would like as a result of we are able to nonetheless see the precise conic gradient. However we are able to lower the values to very, very small ones — like 0.0001% — and abruptly there’s no extra gradient however pure graininess:
Tada! We have now a noise impact and all it takes is one CSS gradient. I wager if I used to be to indicate this to you earlier than explaining it, you’d by no means understand you’re taking a look at a gradient. It’s important to look very fastidiously at heart of the gradient to see it.
We are able to enhance the randomness by making the dimensions of the gradient very massive whereas adjusting its place:
The gradient is utilized to a set 3000px sq. and positioned on the 60% 60% coordinates. We are able to hardly discover its heart on this case. The identical may be performed with radial gradient as nicely:
And to make issues much more random (and nearer to an actual noise impact) we are able to mix each gradients and use background-blend-mode to easy issues out:
Our noise impact is ideal! Even when we glance intently at every instance, there’s no hint of both gradient in there, however reasonably lovely grainy static noise. We simply turned that anti-aliasing bug right into a slick characteristic!
Now that we have now this, let’s see a couple of fascinating examples the place we’d use it.
Animated no TV sign
Getting again to the demo we began with:
When you test the code, you will note that I’m utilizing a CSS animation on one of many gradients. It’s actually so simple as that! All we’re doing is transferring the conic gradient’s place at a lightning quick period (.1s) and that is what we get!
I used this identical approach on a one-div CSS artwork problem:
Grainy picture filter
One other thought is to use the noise to a picture to get an old-time-y look. Hover every picture to see them with out the noise.
I’m utilizing just one gradient on a pseudo-element and mixing it with the picture, due to mix-blend-mode: overlay.
We are able to get a good funnier impact if we use the CSS filter property
And if we add a masks to the combo, we are able to make much more results!
Grainy textual content remedy
We are able to apply this identical impact to textual content, too. Once more, all we want is a few chained gradients on a background-image after which mix the backgrounds. The one distinction is that we’re additionally reaching for background-clip so the impact is simply utilized to the bounds of every character.
Generative artwork
When you hold enjoying with the gradient values, it’s possible you’ll get extra shocking outcomes than a easy noise impact. We are able to get some random shapes that look lots like generative artwork!
In fact, we’re removed from actual generative artwork, which requires lots of work. But it surely’s nonetheless satisfying to see what may be achieved with one thing that’s technically thought-about a bug!
Monster face
One final instance I made for CodePen’s divtober 2022 assortment:
Wrapping up
I hope you loved this little CSS experiment. We didn’t precisely be taught one thing “new” however we took just a little quirk with gradients and turned it into one thing enjoyable. I’ll say it once more: this isn’t one thing I’d think about using on an actual mission as a result of who is aware of if or when anti-aliasing can be addressed sooner or later in time. As an alternative, this was a really random, and nice, shock once I stumbled into it. It’s additionally not that simple to manage and it behaves inconsistently throughout browsers.
This mentioned, I’m curious to see what you are able to do with it! You possibly can play with the values, mix completely different layers, use a filter, or mix-blend-mode, or no matter, and you’ll for positive get one thing actually cool. Share your creations within the remark part — there aren’t any prizes however we are able to get a pleasant assortment going!
