Pixel Patterns With CSS

Pixel patterns can add interest to a design element, whether it’s the background of a website or a particular item. Interestingly, creating patterns with CSS (i.e. without images) is apparently possible. The tricky part is that doing this manually is not exactly easy.

Patternify changes all that. Sacha Greif’s tool lets you create patterns with up to 10 square pixels with multiple colors. A few patterns are built in (including wavy lines, dotted lines and basketweave) that you can use or adapt. To use the tool, just draw your pattern on the grid (use the cursors to limit the drawing surface and control the tiling), and download either the CSS or PNG file. You can also get a short unique URL to share with other pattern addicts.