The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
05 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 a number of websites that collect many free patterns available for use on the design of your sites and web applications. Patterns Galleries | CSS3 Patterns | Patterns Generators | Examples of websites with patterns

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:

CSS3 patterns:

A different option is to use patterns generated by code. CSS3 offers new labels whose combination can form fantastic patterns and generating excellent results which, being generated from text, reduce the weight of the load of the page. Lea Verou, one of the most advanced web developers in this direction and member of Awwwards jury, published a comprehensive entry on this blog explaining the development of standards using CSS3 gradients from the style sheet, which is shown in a gallery and is the best example of this technique today.

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.

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: