CSS3 Patterns Gallery

• Click on a pattern to expand
• Textareas are editable
• Browser support
• Submit a new one
• Github repo
• Enjoy!

Browser support

The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).

Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation.

Submission guidelines

If you have a new pattern to submit, please send a pull request. However, please bear in mind that I can't accept all submissions, sorry for that. For a pattern to be accepted, the following factors are considered (in descending order of importance):

• Does it present a new technique?
• Is the number of gradients and color stops worth the effect? The whole point of those patterns is to make page loading faster by reducing file size and HTTP requests without the unreadable gibberish that data URIs add in our stylesheets. If your pattern needs a 2KB code for example (which becomes 10KB when used in production, due to all the prefixes), then it's not very useful, except serving as a proof of concept.
• How common is the pattern?
• Does it look nice?

By Lea Verou • If no other author is mentioned, the pattern is created by Lea Verou