The CSS3 Patterns Gallery includes some beautiful pattern designs for your websites. Unlike regular patterns that  are rendered using images, these patterns are created entirely in CSS thus saving a few HTTP requests and also reducing the size of your web pages.

For instance, here’s a sample CSS pattern that generates the paper effect.

background-color: #fff; 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

CSS3 Patterns should work on all modern browsers that support gradients. The project is also available on Github.

← Patterns