CSS Pattern Generator and Gallery

There is a lot of hype around CSS patterns nowadays, now that we can add gradients or use transformations, even if sometimes it’s only for Webkit. Here we have a pattern generator and a CSS 3 patterns gallery where you can view and download them.

CSS Pattern Generator

Patternify is a nifty tool created by Sacha Greif and you can use it to create pixelated CSS patterns. You work on a resizable grid of 10×10 pixels at most and you have to set the color and transparency for each pixel. There are tools to undo an action, erase a pixel, sample a color or fill the canvas with a solid color.

Technically speaking, these are not strictly CSS 3 patterns. Patternify makes use of base64 encoding to create raw image data. You can either download the patterns in PNG format or copy the CSS code to include in your page. Once you’re satisfied with your creation, you can get a url with the pattern parameters for bookmarking or sharing.

CSS 3 Patterns Gallery

This Gallery showcases specific CSS 3 patterns that are meant to be viewed in Chrome, Firefox 3.6+, Opera 11.10+ and IE10+. However, it’s best viewed on Chrome. For example, while the Japanese Cubes pattern is correctly displayed in Chrome, if viewed with Firefox, the pattern shows an ugly slanted hairline in the brighter face. However, the Madras pattern is best viewed with Firefox 4 so each browser has its own advantages.  Nevertheless, the gallery is awesome and the patterns are great.

To use one of these patterns, you must click on the desired pattern and copy the code. Furthermore, the textarea with the CSS code is editable, so you can tweak the pattern’s color and shape to your heart’s.

That’s all for today, have fun and don’t forget to check out the generator of CSS 3 gradients that we reviewed last time.