8 CSS & JavaScript Snippets for Creating Background Noise Effects

Noise effects are incredibly versatile. They can help establish a look that’s either retro or futuristic. And they also offer an easy way to add personality to any design element. Items such as text, images, and backgrounds can all be enhanced with this grainy and sometimes glitchy effect.

Thus, it’s no surprise that web designers are producing some wildly creative work that uses noise effects. Everything from static features to interactive animations is being shared online. Some of the results are truly stunning.

To prove our point, we’ve scoured CodePen for top examples of noise effects in action. Want to see for yourself? Let’s bring the noise!

Tri-Wave Animation by Chris Gannon

This groovy wave animation is reminiscent of an old-fashioned piece of electronic equipment. Hints of noise provide some realism to the scene, while SVG makes for incredibly smooth movements. This could make a great loading animation.

See the Pen Tri-wave by Chris Gannon

SVG Turbulence Filter Test by Simon Coudeville

Here’s a decidedly-retro effect that adds Perlin noise to a text container. Adjustable SVG filtering allows you to tweak the distortion in various ways. The jagged, aliased edges are from a time before high-end video cards made graphics look silky-smooth.

See the Pen SVG Turbulence Filter Test by Simon Coudeville

Noisy Ghost (WebGL Shader) by Ksenia Kondrashova

Noise can be spooky, as evidenced by this ghost that follows the path of your cursor. Notice the grainy outer portions of the character, where it seems to fade into thin air. The animation is authentic – not to mention a whole lot of fun.

See the Pen Noisy ghost (WebGL shader) by Ksenia Kondrashova

Pure CSS Glitch by Tee

Depending on your point of view, this glitchy scene could be considered modern or retro. But what’s not up for debate are the sharp movements and color shifts. This snippet may compel you to check your monitor settings – just in case something’s gone awry.

See the Pen Pure CSS Glitch Experiment (Twitch Intro WIP) by Tee

Dynamic Watercolor Effect by Shaw

By mixing watercolor hues and polygons, this presentation features a worn-in look. Click or touch the canvas to add a splash of noisy color. The whole thing is a fun interactive art project.

See the Pen Dynamic Watercolor 🖌️

Art of Noise by Tibix

This snippet’s colorful shifting blobs are similar in look to a heatmap. Use the control panel to adjust the size, speed, shape, and hue of the animation. Once again, noise effects add some realistic properties to the mix.

See the Pen Art of Noise #8 by Tibix

WebGL Particles & Noise Displacement by Nicolas Garnier

For a more modern take on noise effects, check out this particle animation. It uses WebGL to create liquid-like 3D waves, with incredible light shading to boot. Noise makes an impact as the lighting shifts from darkness to bright white. It’s both mesmerizing and an example of what this powerful JavaScript library is capable of.

See the Pen WebGL particles + noise displacement by Nicolas Garnier

Risograph Gradient Effect with SVG by Christopher Kirk-Nielsen

There are no fancy animations here. Just the same, this shape demonstrates that noise effects can enhance static elements, too. The finely-detailed graininess is sure to help you create an aesthetic while grabbing a user’s attention.

See the Pen Risograph Gradient Effect with SVG by Christopher Kirk-Nielsen

Making Noise for Your Enjoyment

Whether used as a subtle background or star of the show, noise effects are a great addition to a designer’s toolbox. They can be just the thing to add some flair to your projects.

Back in the day, noise was solely an image editor enhancement. But thanks to CSS and JavaScript, it’s possible to implement these effects without harming performance or accessibility. As the snippets above show, there is a world of potential here.

More CSS Effects Snippets