30 websites with beautifully patterned backgrounds

website background pattern

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


Cafe Frida

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


For Better Coffee

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?

Get the look with the Gold Wedding Events Website template.

03. Design a pattern using linework only


Letters, Inc.

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.

If you have a photo you are inspired by, upload it to the Canva color palette generator and get their HEX codes. Or you can pick from the many color palettes that are ready for use.

Make a busy design easy on the eyes by adding a muted color palette, like with the Bright Graphic Designer Portfolio Website template.

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?

You can use your own photos or stock photos. Read on for tips on How to find free stock photos for your business, or check out Canva's extensive stock photo library.

A close-up of a plant can provide an interesting background pattern. Check out the Green Photographic Environment Charity Bio-Link Website template.

06. Animate your pattern


Google Ventures

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 and 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.

Shapes and other elements sized in full can create interesting patterns. Check out the Blue, Pink, and Yellow Colorful Blocks Blogger Bio-Link Website template.

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


Poke London

Patterns don’t have to be extremely colorful to be interesting. Sometimes a simple palette and interesting shapes are enough to produce a beautiful pattern, like the one featured on Poke London’s site.

Use two to three colors to keep your color palette simple. Get the look with the Beige Brown Color Blocks Fashion Designer Resume Website template.

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.

You can use a similar combination of dark and light colors. The Teal and Blue Green Colorful Blocks Fitness Service Websitetemplate uses teal on a dark background.

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? Canva has various icons available in its image library, but you can also take a look at our article Free icons:49 best sites to find beautiful and useful free icons for more options.

You can use one element, like the flowers of the Pink Flower Wedding Events Website template, to create a color palette for your design. You can also repeat the flowers on other pages of your website.

14. Add movement to your pattern


Sourisseaux Partners

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

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

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?

Explore gradient colors to add depth and dimension to your background in the Blue Purple Professional Gradient Business Website templates.

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


Jamie Wolfond

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.

Limit design elements and colors to keep things to a minumum. Check out the Teal White Colorful Blocks Blogger Website template.

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.

Photos of events can be used as background, and the colors can be used as the basis of the site's color palette. Be inspired by the White Sleek and Simple Wedding Photography Photography Website template.

22. Use your hands


Taro Horiuchi

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.

You can fine handmade elements in Canva to use with your design, like the watercolor paint in the Light Beige Abstract Watercolor Destination Wedding Wedding Websitetemplate.

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


Print Mor

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


Less Rain Berlin

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.

Zoom in on your background image or pattern makes it a little more interesting and very unique. Get the look with the White Purple Grey Real Estate Clean Grids Real Estate Website template.

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


Kelli Anderson

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.

The quickest way to create patterns for your website is use shapes. Change the size and color to make it more interesting. Check out the Orange Purple Basic Geometry Education Website template.

29. Use typography and/or words


Hack FWD

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.

Mix and match your design with an interesting color palette and cool typography. Get the look with the Beige and Black Curated Editorial Fashion Photography Photography Website template.

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.

Your turn

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!

Related articles

See all

Bring your ideas to life in minutes

Express yourself with the world's easiest design program.