Patternify: Online CSS Pattern Generator

Israel Nicolas 15-04-2011

Here is a way to generate CSS background patterns within seconds. Patternify CSS Generator lets you create different patterns on the pixel level and then download them as PNG, copy as CSS code, and share them to friends.


css pattern generator

To make use of Patternify, start by setting the size of the pattern in the drawing box. The larger the size of the box, the more pronounced pattern you can create. Click on each box to mark it with different colors and transparency, or fill the whole canvas with your selected color. You can also click on the different preset patterns available including grey-scale old school, color, and miscellaneous patterns.

Once done, you can easily apply it to your website by copying and pasting the CSS code or downloading the PNG to use in your server. This nifty tool is great for newbie CSS designers or anyone who want to set-up a unique CSS background quickly.


  • Free; no sign up required.
  • Generate CSS background patterns within seconds.
  • Check preview and get Base64 code.
  • Adjust color and opacity.
  • Similar tools: Repper, BgPatterns and PatternCooler.

Check out Patternify @


Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

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