Creating 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! 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…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply