These days, patterns are everywhere.
You’ll commonly find them on great pieces of packaging, inside the covers of several awesome publications, and printed on beautiful rolls of fabric.
If you’ve been poking around online lately, chances are you’ve seen patterns being used in web design as well.
While they’re used in many different sections of websites, they’ve become an especially popular choice for backgrounds.
If you’re keen to jump on this boat and are searching for a little inspiration to get you going, check out our showcase, below.
In it, you’ll find 30 great examples of different approaches and styles that can help get your creative juices flowing.
01. Use Your Website’s Design Elements
Trying to figure out what elements to use to build your website’s pattern? To see this in practice, check out Cafe Frida’s website.
As you land, you see a lovely pattern made up of beautiful white flowers that adapt into the rest of the layout as you scroll. It’s delightful.
02. Create a Symmetrical Pattern
We tend to find beauty in symmetry. Take advantage of this and build symmetrical patterns, like the one used on the site, For Better Coffee.
Draw an imaginary line down the middle of the page. Notice how both sides are identical?
03. Design a Pattern Using Linework Only
Sometimes designers tend to get color happy and forget how beautiful simple lines can be. Check out Letters, Inc. and their intricate pattern.
If you click through to the website, you’ll also be able to appreciate the different subtle animations that characterize some of the pattern’s pieces.
04. Use Muted Colors on Busy Patterns
As you dive into web design, it’s important that you keep in mind that a website’s design should always support its functionality and help make its information accessible.
Busy patterns can sometimes be overwhelming and make it tough for users to easily glean information. If you’re working with a busy background pattern, do what VOTD TV does and use muted colors.
05. Use Photorealistic Elements to Build Your Patterns
Hi-Res is a design agency based in London that produces unbelievably sexy work. Head over to their site to check out their award-winning work.
Notice how they’ve designed patterns made with photorealistic elements, like bubbles, that change as you look at different pieces of work. Pretty cool, right?
06. Animate Your Pattern
Animation has become the rage in UI and web design. Rich animations are now characteristic of high-quality apps and websites.
If you’ve developed a simple background pattern, give animating it a shot. You might arrive at an elegant and beautiful result, like Google Ventures does on its A Year In Review site.
07. Use Transparency & Layers
Garbett’s website features a rich blue pattern made up of transparent dots. Naturally, as you scroll down, each of the dot’s content changes. It’s a great and simple approach that can help spice up an otherwise bland pattern.
08. Use Big Elements
XOXO Fest’s website features a background pattern made up of lines and circles that changes its configuration every time you refresh. The design also banks on transparency and beautiful typography, used in combination to create a modern, fresh look.
09. Integrate Your Pattern With Your Layout
1407 integrated its background pattern into its layout. As you click on different UI elements, the pattern changes its configuration to adapt to changes in the layout’s structure resulting from clicking on the UI element.
10. Use a Simple Color Palette
11. Opt for Black & White Only
Some of the most interesting patterns I’ve seen use black and white only, similar to the one Echo uses on its website. Not convinced? Check out M.C. Escher’s tessellations. You’ll find several mind-bending examples constructed entirely in black and white.
12. Be Playful
Give using abstract, random elements to build your patterns a shot, like Cabure does. They’ve set fun design elements brightly colored on a dark background and have animated them.
13. Use Icons as Building Blocks
Build your patterns using icons that are meaningful to the product you’re featuring, like Socialist does on their app website. Not only will they be beautiful, they’ll help you visually communicate information about your product to your users.
Don’t have the time to find the perfect set of icons? Head over to another Design School article — Free Icons: 49 Best Sites To Find Beautiful And Useful Free Icons.
14. Add Movement to Your Pattern
Sourisseaux Partners’ pattern moves as your mouse moves. The movement isn’t heavy or drastic but just enough to catch your attention. It’s a great way to add a little interactive fun to your website and pattern.
15. Use Letterforms as Design Elements
Matt Luckhurst created a beautiful pattern using the letters in his name and a few different fun design elements. Normally, when we think of patterns, we tend to forget how valuable letterforms can be and the different solutions they might help you create.
If you’re ever struggling to figure out what cool element can become the foundation of your patterns, don’t forget to look into the alphabet.
16. Turn Your Pattern Into Part of the User Interface
Sam Skinner uses a cool set of icons to create a pattern that you can click on to view his work. If you simply hover over an icon, you’ll draw a line between each one. It’s a bit hard to put into words, so click over here and begin hovering on icons. Pretty cool, huh?
17. Use Variations of the Same Shape
You don’t have to use tons of different shapes to create a pattern. Try selecting a simple shape and building a pattern using variations of it.
Not sure what this means? Head over to Acorns’ website and check out their background. They’ve designed a great pattern made up of triangles that vary in size and color.
18. Use Animation Loops
This one is really something you have to see to appreciate. Jam3 features an awesome pattern of triangles that move in the same direction.
Moving your mouse will disturb their flow but if you hold still, they’ll go back to their original formation. If you hover over each letter, they’ll begin to disintegrate too. Take a look, it’s pretty cool.
19. Swap Out Patterns
Who says you have to feature only 1 pattern? Jamie Wolfond swaps out his background pattern every time you click. Some are pretty hysterical.
Click over to his website to check his patterns out as well as some of his gorgeous work. If you’ve designed a few different options and are unsure of which to go with, try using them all.
20. Keep It Simple
Check out the great graphic on Borheh’s website. By using a slight change of direction, they’ve produced a stunning pattern.
If you think you need to push your design a bit further, consider changing the direction of a section of your pattern or some of the elements you’ve used to build it.
21. Use Meaningful Images/Icons as Building Blocks
Mixture.io uses a subtle background pattern made up of wireframes. It’s fitting, considering how useful wireframes are in front-end development, the discipline that Mixture creates tool for.
As you create your own patterns, consider building them using elements that reference your website’s content. In other words, if you’re designing a website for a dog walking company, try using doggy biscuits or leashes.
22. Use Your Hands
With so many great digital tools available today, it’s easy to forget how beautiful patterns can be when you sketch them out by hand. Try creating your patterns or the elements you need to build them with your hands, using classic mediums like paint or crayons.
You could end up with a background as surreal as Taro Horiuchi’s.
23. Build a Bright Color Palette
As you build a color palette for your patterns, give bold colors a try. Lemondela uses a bold yellow and variations of it on the pattern’s details. This is a great way to make sure the background isn’t packed with too many bright colors that might become overwhelming.
24. Don’t Forget Classic Patterns
Sometimes, a simple and classic solution similar to the one featured on Print Mor’s website can go a long way. Don’t hesitate to try out simple, classic patterns on your background. They’ll be subtle but can spice up a bland layout.
Be careful with scale, though, or they might begin to feel like a texture.
25. Use Multiple Patterns
Check out Less Rain Berlin’s website. They combine 2 patterns, a simple line pattern and an illustrative one, to create a gorgeous visual. As if it weren’t enough, the site also features a little animated train.
26. Zoom In
Blow up your pattern and zoom all the way in. While the result might not let viewers appreciate the entire pattern, it might help you create an interesting background like Uber’s Brand Guideline’s site. Add animation to the mix and you’re all set to go.
27. Combine Other Design Elements With Patterns
As you create background patterns, don’t forget that you can combine them with other visuals to produce great work. Check out Combadi’s site, a great example of how combining a pattern with a beautiful image can result in something beautiful.
If you aren’t crazy about big images, try combining your pattern with a solid color background or gradient.
28. Design Using Simple Geometric Shapes
Don’t want to design complicated elements to build your pattern? Try using basic geometric shapes to arrive at a beautiful solution. Check out the example below, which uses a combination of only 2 geometric shapes to create an interesting background pattern.
29. Use Typography and/or Words
Don’t hesitate to turn words into design elements for your pattern. They’ll be especially powerful if they’re tied to the subject of your website. Take a look at Hack FWD’s design, a great example that features a combination of icons and words.
30. Design Using Themes
Build your patterns around the theme of your website, like Wiski. They’ve designed a pattern that depicts the edges of the beautiful white slopes featured on the Wiski website. Be inspired by the content featured on the website you’re designing for, and build a design solution around it.
And there you have it, 30 great examples to help inspire your next beautiful website background pattern.
To really think outside of the box, don’t forget to draw inspiration from offline sources. Check out a gallery, museum or even your local library. Sometimes the best sources for online inspiration don’t live on a screen.
And, as always, happy designing!