#StopWarInUkraine Save the children

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
11 Collect

Background Pattern Designs And Resources For Websites

Article by Awwwards in Resources & Tools -

Patterns are a useful resource for website design, allowing us to liven up our backgrounds by using tiny images with just a few kb. A repeated graphic is a good strategy for responsive design as is fits all screen resolutions perfectly. Patterns are indefinitely repeated either horizontally and vertically, and we can play around with a variety of shapes and colors, bitmaps or vectors, and different styles.

Here’s a nice compilation of resources and tools such us Patterns Galleries, CSS3 Patterns, and Pattern Generators, plus some examples of websites with background patterns to give you some inspiration.

Patterns Galleries:

There are numerous websites that offer complete resource galleries to download free patterns, check out some of our favorites on the following list:

Pattern generators:

If you're looking for something different than the patterns available in the galleries, why not try a pattern generator to make your own custom patterns?  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 patterns as a  design resource, either in the background or in other areas of the site: