Noupe Editorial Team March 17th, 2013

Down with Boredom: 5 Pattern Generators for Background Designs

If you want the background of your website to consist of more than a color, you'll be thinking about a background image. If there's no obvious image you should use or if you don't want to get determined by your imagery, while at the same time being able to serve different resolutions more or less effortlessly, you'll soon turn your thoughts on textures or repetitive patterns. Creating repetitive, seamless patterns is not easy. Pattern generators are there to help you achieve just this. We have aggregated the five most promising tools...

Pattern Cooler

patterngeneratoren_patterncooler-w550 If "subtle" is not for you, you'll probably love Pattern Cooler. 225 different patterns are available. Each pattern can be customized. Besides offering the possibility to change all the colors individually, Pattern Cooler allows you to choose from four different sizes. If this still doesn't suffice, Pattern Cooler lets you add a texture to the pattern. Textures are provided in textile or noise styles. Once you've finished your pattern, Pattern Cooler offers a download in PNG format. If you want your pattern to be high-res or even vectorized, Pattern Cooler has you covered, but will set you back 10 USD per pattern.


patterngeneratoren_patternify-w550 Patternify is an excellent tool for pixel-pushers or 8bit aficionados. On a defined canvas, ranging from one to ten pixels edge length, pixels are placed. Color and transparency can be chosen freely. Several simple patterns can be preselected, a live-preview shows the creation in operation as a pattern. Besides offering a download in PNG format, Patternify can provide the pattern as a data URL complete with CSS code.


patterngeneratoren_patternizer-w550 Patternizer ist no classical generator. The service does not create an image for implementation into the background of your web project. Patterns generated by Patternizer are placed into your website using JavaScript and the canvas element. To create a pattern, stripes in various colors and widths are layered over each other, using Patternizer's visual UI. The finished pattern is saved as a JSON object, which then, together witt the Patternizer library needs to be embedded into your HTML document.


patterngeneratoren_stripemania-w550 If you like striped patterns, but prefer to use them in a more conventional way, Stripemania is for you. Compared to Patternizer, possibilities are a little limited, but the major advantage is that Stripemania delivers images in GIF or PNG. You can also vary the colors on one and the same stripe, even set gradients.


patterngeneratoren_zenbg-w550 ZenBG closes our little roundup of pattern generators. ZenBG offers different textures, which can be colored ad libitum. There are wood-, stone- and paper-variants. Having chosen the desired texture, color it to your liking. If you are into versicolor, opt for more than one color and apply it as a gradient. Once finished, ZenBG lets you download a ZIP archive, containing not only the imagery but also the needed CSS.

Related Links

By the way: If you know of more generators for the same task, let us know in the comments below...

The article was written by Denis Potschien
and first published in our German sister publication Dr. Web Magazin.


Noupe Editorial Team

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Leave a Reply

Your email address will not be published. Required fields are marked *