👋 The demos on this article experiment with a non-standard bug associated to CSS gradients and sub-pixel rendering. Their conduct could 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 wish to offer you a heads-up in case your laptop computer fan begins spinning.
Do you do not forget that static noise on previous TVs with no sign? Or when the sign is unhealthy and the image is distorted? In case the idea of a TV sign predates you, right here’s a GIF that reveals precisely what I imply.
View picture (comprises 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 wish to say that there are higher methods to create a static noise impact than the strategy I’m going to indicate you. We will use SVG, <canvas>, the filter property, and so forth. In reality, Jimmy Chion wrote a good article displaying how one can do it with SVG.
What I shall 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 facet initiatives for enjoyable however utilizing SVG is cleaner and extra appropriate for an actual undertaking. Plus, the impact behaves in another way throughout browsers, so if you happen to’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 any 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 unhealthy at anti-aliasing. You realize these form of jagged edges we get when utilizing onerous 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 clean 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 fairly than utilizing a straight-up onerous colour 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 concept 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 concept what would occur nevertheless it 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 unhealthy the final one is? It’s a form of scrambled within the center and nothing is clean. Let’s make it full-screen with smaller values:
I suppose you see the place that is going. We get a wierd distorted visible after we use very small decimal values for the onerous colours stops in a gradient. Our noise is born!
We’re nonetheless removed from the grainy noise we wish 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 out of the blue there’s no extra gradient however pure graininess:
Tada! We’ve got a noise impact and all it takes is one CSS gradient. I guess if I used to be to indicate this to you earlier than explaining it, you’d by no means understand you’re a gradient. It’s a must to look very fastidiously at heart of the gradient to see it.
We will improve the randomness by making the scale of the gradient very huge whereas adjusting its place:
The gradient is utilized to a hard and fast 3000px sq. and positioned on the 60% 60% coordinates. We will hardly discover its heart on this case. The identical will be executed with radial gradient as effectively:
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 clean issues out:
Our noise impact is ideal! Even when we glance carefully at every instance, there’s no hint of both gradient in there, however fairly lovely grainy static noise. We simply turned that anti-aliasing bug right into a slick characteristic!
Now that now we have this, let’s see a couple of fascinating examples the place we would use it.
Animated no TV sign
Getting again to the demo we began with:
When you examine 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 shifting the conic gradient’s place at a lightning quick period (.1s) and that is what we get!
I used this identical method on a one-div CSS artwork problem:
Grainy picture filter
One other concept 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 will get a fair funnier impact if we use the CSS filter property
And if we add a masks to the combination, we are able to make much more results!
Grainy textual content therapy
We will apply this identical impact to textual content, too. Once more, all we’d like 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, chances are you’ll get extra shocking outcomes than a easy noise impact. We will get some random shapes that look rather a lot like generative artwork!
After all, we’re removed from actual generative artwork, which requires loads of work. However it’s nonetheless satisfying to see what will be achieved with one thing that’s technically thought of 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 study one thing “new” however we took a bit of quirk with gradients and turned it into one thing enjoyable. I’ll say it once more: this isn’t one thing I might think about using on an actual undertaking as a result of who is aware of if or when anti-aliasing shall be addressed in some unspecified time in the future in time. As an alternative, this was a really random, and nice, shock after I stumbled into it. It’s additionally not that straightforward to manage and it behaves inconsistently throughout browsers.
This mentioned, I’m curious to see what you are able to do with it! You may play with the values, mix totally 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 are not any prizes however we are able to get a pleasant assortment going!
Making Static Noise From a Bizarre CSS Gradient Bug initially revealed on CSS-Tips, which is a part of the DigitalOcean household. You need to get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!