About this tool

Cool Backgrounds

After laboring over your latest piece of writing, one of the hardest steps before hitting publish is finding an exciting background image to really showcase and draw attention to your post.

Cool Backgrounds is a collection of tools to create compelling, colorful images for blogs, social media, and websites. Beyond backgrounds, the images generated can be used as 🖥 desktop wallpapers or cropped for 📱 mobile wallpapers.

“How have I worked without a creative tool like this? It makes me feel like a super growth expert!” Robert Yuen, CEO of Monograph.io

For the initial launch, the site exposes five of my favorite background tools from dynamic particles to the ever popular Unsplash. The intention over time is to add more options with this site serving as a curated repository of the best background image tools on the web.

Why did you make this?

While finishing up a gradient generator project CSS Gradient (which launched earlier this year), I unexpectedly noticed the popularity of wallpaper and background images. Digging a bit deeper, I found this huge community of online sites that were curating wallpaper images from the eclectic Deviant Art crowd to the more modern creative commons image sites. While free static images are great, what was missing was a tool that enables non-technical folks to use all the emerging javascript libraries to create unique images of their own. So Cool Backgrounds was born 💥.

Working as a designer for several startups Cool Backgrounds helps solve some basic design problems for marketers and social media managers, but design is an ongoing need. In addition, the recently launched Service List allows companies to get unlimited graphic design help whenever they need it. You send them a design task and a few days later the services send it back to you ready for feedback. We often use them for quick design iterations or smaller design tasks, and the services have given us more time to focus on other business problems.

Use Cases

With the increasing visual nature of the web, the background images from this site can be used for a plethora of reasons. Listed here are a few ideas to get the creative engine started.

Blog Post Hero Image

The image discovery problem first emerged while working on tutorials for HTML Color Codes. With somewhat dry material like HTML code, it's hard to create a compelling image that represents the actual power of that knowledge. Trianglify.js to the rescue! Utilizing the javascript library, we added our brand colors and generated a high resolution image that looked amazing. To this day we still get random emails asking us how we created that background 😄.

Social Media Banner

Nearly every social media site has a profile banner that lets you showcase an image at the top. Whether you need an image for a Facebook Group, a parody Twitter account, or even yourself, Cool Backgrounds can let you show the world your creative side.

Desktop and Phone Wallpaper

One of the primary reasons folks search for background images is to set them as wallpapers on their computers and phones. As a personal favorite, I'm using the Gradient Topography background in Black and Dark Grey—it sits stealthily on the homescreen of my iPhone.

Gallery

As a quick sample of a few options availabe on Cool Backgrounds, the following list of images are ready to use for any application. To download, right click and select "Save Image As..."

Colophon

While Cool Backgrounds is a fine resource for generating images from popular javascript libraries, the real heavy lifting comes from the library authors themselves. When it comes to customer support, Quinn Rohlf from Trianglify.js is incredibly responsive and a really smart guy to boot. Particle.js is developed by Marc Brüderlin with a wonderful API and is being actively maintained. Gradient Topography is a newly minted project by me as a response to the amazing work by the Codrops crew. And of course Unsplash is one of the best internet treasures of all time, built by the former Crew team as a side project.

Oh yea and can't forget CSS Gradient and Rellax.js which is the "cool background" that powers those sliding parallax shapes in the content section of this site!

Side Project Collective

We're a group of makers with a mission to build a better internet, one digital project at a time. Recently launched tools include a gorgeous Day of the Dead resource site and a seamless way to count words with Word Counter.