Pattern Maker

What is Patternify?

Patternify is a simple pattern generator. I built it to save myself the pain of launching Photoshop just to export a 2px by 2px stripe pattern. Not only can you build your pattern online, but with the base64 code, you don't even need an image file anymore: just include the code in your CSS and you're ready to go!

Instructions

Draw your pattern on the grid. You can use the cursors to limit the drawing surface and control the tiling. Once you're done, just download the PNG (make sure to rename it and add the ".png" extension at the end) or copy the code to your CSS. And you can also get a unique URL to share with other pattern aficionados.

Help!

If you can't figure this out, you have some cool new ideas to make it ten times better, or it's just plain broken for you, check out the Support page.

Thanks

Thanks to Tim for helping me out with a couple javascript questions, and many thanks to Scott Hill for letting me steal pay homage to his style.

Color

#

Opacity

Preview


Base64 Code

.myDiv{
   background:url(
   ) repeat;
}
Copy CSS Code

get matrix