How To Generate Patterns & Website Backgrounds

Web designers don't spend all their time writing code. They also spend a lot of time drinking coffee and staring at said code.

Joking aside, the beauty of being a web designer lies in the fact that it's an incredibly creative and versatile job, particularly if you're a freelancer. However, this means that you often have only yourself to rely on when it comes to producing visual material such as icons, background images and color schemes. If you've ever had to create a website on a tight deadline, you know what a challenging task this can be. Luckily, there are apps to help you, and here we've rounded up some online tools for generating patterns. 

Dots

Pixelknetes Background Dotter

Patterns come in many shapes and sizes, and this simple pattern generator is all about dots. You can type or paste the color codes for both dots and the background they should appear on, as well as adjust the height of the image. There's no visible way to save a created pattern (as in, there's no “Download” or “Save” button), but you can click on the background image to view it in a new browser tab, then save it and set it as a tiled background on your website.

Stripes

Striped Backgrounds

StripedBackgrounds is probably the most straightforward tool on this list, as it's immediately obvious what it can do. You're free to choose the colors and the size of your background, but if you're feeling adventurous, StripedBackgrounds can randomize the pattern for some interesting results.

Tartan Maker

Tartan Maker is a fun tool specialized for, you guessed it, tartan-style patterns. There are several parameters to adjust, including color and line thickness. Your generated pattern can be exported to PNG and downloaded, or you can create an account and save your work, add it to the gallery and have it rated by other users. If your patterns become popular, maybe you can call yourself the Tartan Master! :)

Stripemania

Stripemania is not too different from previously described tools, but it does offer a practical full screen preview of a new pattern, and you can add more than just two colors for stripes. It also features a repository of latest patterns called Stripe.licious, which you can freely browse and use any pattern you like. There are also short tutorials available for those who are unsure of their pattern design skills.

Do It With CSS

Did you know that your patterns don't have to be a full-size image? Thanks to CSS there's another way to add patterned backgrounds to your website. Patternify will help you create a small (10 by 10 pixels) image and provide you with the code which will repeat the image, thus creating a seamless background. A useful preview option shows you what your pattern will look like, and the many settings you can adjust make Patternify one of the advanced tools on this list.

Patternizer is a full-blown pattern design tool with options for any and all aspects of a pattern – colors, opacity, width, rotation, even gap and offset. With this tool you can create some pretty wild patterns, and if you need the CSS code, it can generate it for you.

CSS3 Pattern Collection

The last tool we'll mention is technically not an app, but a collection of various patterns which you can use on your website by clicking on a pattern and copying its CSS code. You can also submit more patterns to the collection to make it richer and better.

If you prefer being in control of everything, you can always create or code your own patterns.  It's not difficult, but with these tools it's even easier, especially if you're in hurry. Beginners and users who believe in automation of web design will probably appreciate the list, and those who code everything from scratch might want to bookmark it just in case. 

Ivana Isadora Devcic is a freelance writer, copyeditor and translator fluent in English, Swedish, Croatian and Norwegian. She's a Linux user and KDE fan interested in web design, productivity and personal branding. Ivana tweets about the world around her as @skadinna.