How to Create Wild and Crazy Backgrounds with CSS & JavaScript

The ability of developers to do amazing things with code never ceases to amaze. Sure, functionality still plays a huge role. But these days, we’re also seeing some otherworldly visuals come to life through the help of CSS and JavaScript, among others.

Today, we’re going to focus on an area that is sure to grab your attention: Background patterns. Note that there is no subtlety here. The code snippets we’re about to show you turn up the volume to 11. Some even include far-out animations to enhance the effect.

In that way, they may not be ideal for use on your new portfolio. But they are terrific examples of what is possible with some coding knowledge and a lot of creativity. Enjoy!

Oh, and you may want to put on your sunglasses first. 😎

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Start Downloading Now!

60’s Wallpaper

This retro-inspired mix of orange and blue was created with a whopping eight lines of SCSS. While it’s not animated, staring at it in just the right way does provide the feeling of movement. Now, if they only made pants with this pattern…

See the Pen
Orange & Blue 🧡💙 by Gemma Stiles

Moiré, Please

Here we have another orange and blue example, this time with motion added to the mix. It’s a Moiré (interference) pattern and is quite intense to watch. The noisy look is reminiscent of an old video game played on a cheap television. *Those who have adverse reactions to such visuals may want to avoid this one.

See the Pen
Moire pattern orange-blue [p5.js] by Marjel

Sun King

This psychedelic animation looks like it belongs on a huge screen at a rock concert. The JavaScript-powered effects are attractive an intricate. And due to its somewhat tame movement, you might even be tempted to use it in your own project.

See the Pen
Promesse dorée by Bailh

The ‘G’ Stands for Generator

SVG is a great tool for creating background patterns and effects, as they’re sharp and flexible. This snippet offers a way to create your own pattern, either randomly or via a settings panel.

See the Pen
SVG Background Pattern Generator by Brandon Brule

On Target

Few things get a user’s attention like the combination of movement and color. Here, we have an example that employs this tandem quite effectively. The mesmerizing, ghost-like bullseyes are enhanced with bands of color as they fly past. The result is a pattern that holds your interest, rather than scaring you away.

See the Pen
Ripples in Time 2 by Liam Egan

It’s All Triangles

Some things are just better when they’re simple. Here’s an example of how a few shapes can be combined to create something that looks entirely more complex than it actually is. This set of variously-hued SVG triangles (check out the white outline on the upper left of the snippet) gives off a 3D vibe that encourages users to keep on staring.

See the Pen
SVG triangle pattern by huibvg

Interlock Engaged

Keeping with the theme of simplicity, take a look at this CSS-only pattern. It’s essentially a set of interlocking shapes that repeat across the screen. And, once again, the result looks like something more than the sum of its parts. Especially so when you consider that this snippet is less than 70 lines of code. Repeating this with, say, Photoshop, would be multitudes more time-consuming.

See the Pen
CSS Background Pattern by carpe numidium

Thrice the Fun

Multiple animated patterns on the same screen? “Heresy”, you say. In reality, it’s actually pretty cool. Three equal columns, each featuring a different coloring and animation style. They’re loud, but also seem to fit together nicely. As an added bonus, hover over a column and it expands. In a way, it’s reminiscent of a TV show with a wall of monitors in the background.

See the Pen
Background Pattern Animation by ichimonzi

Say It Loud

In most cases, the snippets above are not practical for everyday use (unless you’re into that whole brutalist thing). But that’s part of what makes them fun. Heck, that’s what makes CodePen itself so great. It’s for experimentation and creating things that you might not otherwise attempt.

And sometimes, the knowledge you gain from building something like a colorful pattern might be used again for a more general purpose. Just the experience in itself can be rewarding.

So, while these patterns may stick out like a sore thumb, they do serve an important purpose. Perhaps they fit right in with a web designer’s quest for self-improvement.

Want to see even more examples? Take a look at our CodePen collection.

Content by Category

Content by Application