The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
06 Collect

Background Pattern Designs And Resources For Websites

Article by Awwwards in Resources & Tools -

Patterns are a useful resource for website design. Filling the background with a full-blown image is no longer a useful solution today as the variety of devices and screen resolutions in the market make it difficult to adapt to them all, although it is true that the latest plugins and scripts offer solutions such as automatic image resizing. Patterns are similar to those images that are indefinitely repeated either horizontally or vertically. That makes a lot more sense today where usability is concerned, especially in responsive design

Today we've compiled Patterns Galleries, CSS3 Patterns, Pattern Generators, a selection of examples of websites using background patterns and many resources that collect toons of free patterns available for your designs.

Patterns Galleries:

There are numerous websites that offer complete resource galleries to download patterns: some of them can be found on the sites we list here:

Pattern generators:

If you don't just like the patterns that are available in the galleries you can always turn to pattern generators to make your custom patterns to your liking. Some include the option to generate as CSS3 code rather than as an image file.

  • PatternPad

    PatternPad is an online built pattern generator. You can choose one pattern you like from their library and customize it or make your own one with different shapes! 

  • Tabbied Pattern

    Start doodling with generated patterns! With Tabbied you are able to create them so easy. Choose a design from their collection and customize it with your colors and new settings.

    Tabbied Pattern

Examples of websites with patterns:

Below we've selected a few examples of websites that use this design resource, either in backgrounds or in other areas of the site: