18 Background & CSS Pattern Generators

11 Background & CSS Pattern Generators

A good pattern can make all of the difference for some designs. I myself just upgraded my web design, and started using a wooden background pattern, which I think has made a huge difference on the overall experience of the site, and in a positive way, of course.

My most recent post – prior to this – that involves colors was the post about color scheme and palette generators , which for more experienced users can be the same as a pattern generator. It only requires a different approach in the implementation process.

Most modern WordPress themes come integrated with the ability to select and/or upload your own background patterns. This post is going to assume that you know how to implement a background pattern, and in case you don’t know – let me know in the comments, and I’ll do a tutorial for it.

Remember, these are all free background generators, and there is no need to wonder whether they are. I’m tired of bullshit bloggers who create these lists, only to include ten premium ones and one free one, without ever telling the user.

So here are the list of 18 Background & CSS Pattern Generators

Click on the images to learn more about each of these tools!

1.  Background Image Generator – SiteOrigin

Background Image Generator - SiteOrigin
You are given 300 patterns to choose from, unlimited colors and several blend modes. I can already see how many people have spent half of their day with this tool, generating away the perfect background pattern. The end result will come in a form of a .png image – which you can then implement straight away.

2.  ZenBG – Background Generator

ZenBG—Background Generator
The thing I love about ZenBG is that it allows you to load your own website’s URL, and so you’re able to make ‘live’ changes and see how the background pattern would look like on your webpage, possible saving you some time. Plenty of patterns to choose from, unlimited colors and outputs a simple CSS code to use at the end.

3.  Ultimate CSS Gradient Generator – ColorZilla.com

Ultimate CSS Gradient Generator - ColorZilla_com
A powerful Photoshop-like CSS gradient editor from ColorZilla. Lovely tool, plenty of time can be spent finding the perfect tone and match for your website. You can import colors from an image, or a previously generated CSS file – the output comes in direct CSS, easy to implement and also very lightweight. Try it and see for yourself. It’s frequently updated, worth noting.

4.  BgPatterns — Background Patterns Maker

BgPatterns — Background Patterns Maker
When you’re done building, you get to save the pattern as an image. It’s a great little tool, offers a variety of choices and of course a live preview. Definitely fun to play with.

5.  Stripe Generator – ajax diagonal stripes background designer

Stripe Generator - ajax diagonal stripes background designer
The first thing that came to my mind, was how great this tool can be for an under construction website. Though, I’m sure there are those who prefer this type of background patterns, and if anything – the public directly of styles is covering roughly ~150 pages of pre-made strip styles, worth checking out.

6.  CSS Gradient Background Maker

CSS Gradient Background Maker
Sometimes, all we need is a little bit of simplicity and we’re good to go, and this website by Microsoft is perfect for that one single purpose, to help you create a repeating background pattern, with CSS by using the most basic colors. You can choose from three styles, to make it a little bit more fancy, haha.

7.  Noise Texture Generator v2.1

Noise Texture Generator v2_1
Incredibly easy to use noise background pattern generator, all of the results are generated into a simple image, ready to use straight away. I do recommend this tool, but watch out for it putting extra load on your browser.

8.  Web Background maker

bgMaker III Background maker II Tiled Background generator I Web Background maker
It’s a very traditional one, and might not be appealing to that many people. While it’s true, their gallery of pre-made patterns is enormous, and I’d bookmark it if only for that feature alone. You can sort the results by all kinds of queries, to make it easier to find something you like. It’s like creating a custom favicon, only it’s for a background pattern.

9.  Gradient CSS Generator | CSSmatic

Gradient CSS Generator I CSSmatic
This one is quite similar to the one from ColorZilla, and offers perhaps a few more interesting features, like importing in SASS format for example. It’s also made by CSSmatic, who offer a couple of more tools for CSS designers to choose from.

10. Tartan Background pattern generator

Tartan Designer - Tartan Maker - Tartan Background pattern generator
Very vintage, classic like generator, but also very cool at the same time. You can check out the gallery page to see what other members have created, and the results can also be browsed by tags, to make it easier and quicker to find something you like.

11. Dotted Background Generator

Dotted Background Generator
The last pattern generator on our list is meant for those who like bots, and bubbles! It’s very easy to use, and doesn’t provide very much functionality. If anything, I’d depend on the random button and keep generating, until I find something I like. Although, I think most of these look good.

12. Free Seamless Pattern Backgrounds | Patterncooler.com

Free Seamless Pattern Backgrounds Patterncooler.com
Patterncooler a wide selection of patterns that fall under categories such as vintage, retro, natural, abstract, and more. Each background pattern can be previewed and observed before deciding, and it’s very simple to use.

13. Patternizer – Stripe Pattern Generator Tool

Patternizer Stripe Pattern Generator Tool
Patternizer will let you build your own custom patterns (oriented by stripes) by generating a number of custom setting options from the menu panel on the left hand side. Colors can also be adjusted, so there’s a bit of flexibility in terms of what you need for a particular design.

14. Design Patterns on CodePen

Design Patterns on CodePen
CodePen is home to thousands of amazing — state of the art — web designers who have taken their time to craft amazing background/design patterns that any webmaster can benefit from. Each design patterns reflects a specific category, so you can really pimp up your design styles.

15. Subtle Patterns | Free textures for your next web project.

Subtle Patterns Free textures for your next web project.
Subtle Patterns has been around for years now, funny how we didn’t include it in the first version of the site, and is a patterns provider of several hundred different patterns. I have found that these patterns in particular work great with WordPress themes, so take a look and see what you can find — most important thing is to experiment by actually trying the patterns.

16. The Pattern Library

The Pattern Library
The Pattern Library is a scrolling library of exciting and sometimes overwhelming design patterns that will suit anyone of the Tumblr flavor. All you have to do is load the site and begin scrolling down to see how each pattern unfolds, and if you find one that you really like, you can just click Download on the right-hand side panel.

17. Plain Pattern

Plain Pattern
Are you looking for a reliable SVG pattern generator? This might be the one! Plain Pattern offers an opportunity to generate an SVG pattern, either by choosing from a list of pre-integrated icons, or you can actually upload your own and create a pattern that way. It’s very easy to master, and the developer has promised to launch a number of exciting features in the near future.

Are you an avid fan of SVG (Scalable Vector Graphics)? We are, too! If you wish, please explore some of our past publications related to SVG, here are some of them: SVG icons and where to get them, an easy to digest guide to SVG patterns, and if you really want to dig deep with this particular subject, please see our roundup of SVG books — we know you’ll love it!

18. PolyGen App for iOS and Android: Low Poly Art and Wallpapers

PolyGen App for iOS and Android Low Poly Art and Wallpapers
PolyGen is an amazing app. You can create stunning photography, including background patterns, that will blow away your audience. To best understand PolyGen, you should install either the Android or iOS version and play around a little with some of your own favorite images to get a feel for it.

Conclusion: –
It’s quite a list, but I think it covers the majority of the field and we can generate enough patterns to last us several lifetimes. I’m not sure it’s what I expected at the beginning, when I started writing the post – but I was able to learn about some new tools, and you never know when you might need them.

Any favorites for you in the list? What about some others ones that I didn’t get to list? Would love to hear about them.

UPDATE #1: 16/10/2015
Right, so this post has been doing really well over the last year+, and it was time to finally update it. After doing a little inspection, it seems that most of the initial tools we had in the list are actually still functional, which is great, but digging deeper I was able to come up with an additional 7 tools that can be found at the lower part of the post. The offer to suggest your own tools through the comment section still stands, and if you wish for your own background/pattern generator to be found in this roundup, please make a suggestion and we will consider it. Thanks!


  1. Thank you for this list! I’ve used a few of these but the ones I like best have changed and no longer work as well (in my opinion). Glad to have something new to play with that will let me get just the effect I need.

    • Hi Vanessa,

      thanks for your comment, although my response is delayed, it’s with good reason — the post has just been updated with additional seven tools, so there’s plenty more to explore and play around with. Please let me know how the new tools work out for you, and whether you have come across any others alongside your travels in these last few months.


Please enter your comment!
Please enter your name here