30 websites with beautifully patterned backgrounds

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.

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.⁠(opens in a new tab or window)

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.

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⁠(opens in a new tab or window).

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⁠(opens in a new tab or window) template.

Sometimes designers tend to get color happy and forget how beautiful simple lines can be. Check out Letters, Inc.⁠(opens in a new tab or window) 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.

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⁠(opens in a new tab or window) does and use muted colors.

If you have a photo you are inspired by, upload it to the Canva color palette generator⁠(opens in a new tab or window) and get their HEX codes. Or you can pick from the many color palettes⁠(opens in a new tab or window) 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⁠(opens in a new tab or window) template.

Hi-Res⁠(opens in a new tab or window) 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⁠(opens in a new tab or window), or check out Canva's extensive stock photo library⁠(opens in a new tab or window).

A close-up of a plant can provide an interesting background pattern. Check out the Green Photographic Environment Charity Bio-Link Website⁠(opens in a new tab or window) template.

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⁠(opens in a new tab or window).

Garbett’s website⁠(opens in a new tab or window) 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.

XOXO Fest’s website⁠(opens in a new tab or window) 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⁠(opens in a new tab or window) template.

1407⁠(opens in a new tab or window) 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.

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⁠(opens in a new tab or window) 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⁠(opens in a new tab or window) template.

Some of the most interesting patterns I’ve seen use black and white only, similar to the one Echo⁠(opens in a new tab or window) uses on its website. Not convinced? Check out M.C. Escher’s tessellations⁠(opens in a new tab or window). 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 Website⁠(opens in a new tab or window)template uses teal on a dark background.

Give using abstract, random elements to build your patterns a shot, like Cabure⁠(opens in a new tab or window) does. They’ve set fun design elements brightly colored on a dark background and have animated them.

Build your patterns using icons that are meaningful to the product you’re featuring, like Socialist does on their app website⁠(opens in a new tab or window). 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⁠(opens in a new tab or window) for more options.

You can use one element, like the flowers of the Pink Flower Wedding Events Website⁠(opens in a new tab or window) template, to create a color palette for your design. You can also repeat the flowers on other pages of your website.

Sourisseaux Partners’⁠(opens in a new tab or window) 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.

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.

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⁠(opens in a new tab or window) 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⁠(opens in a new tab or window) templates.

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⁠(opens in a new tab or window) and check out their background. They’ve designed a great pattern made up of triangles that vary in size and color.

This one is really something you have to see to appreciate. Jam3⁠(opens in a new tab or window) 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.

Who says you have to feature only 1 pattern? Jamie Wolfond⁠(opens in a new tab or window) 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.

Check out the great graphic on Borheh’s website⁠(opens in a new tab or window). 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⁠(opens in a new tab or window) template.

Mixture.io uses a subtle background pattern made up of wireframes. It’s fitting, considering how useful wireframes⁠(opens in a new tab or window) 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⁠(opens in a new tab or window) template.

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.⁠(opens in a new tab or window)

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 Website⁠(opens in a new tab or window)template.

As you build a color palette for your patterns, give bold colors a try. Lemondela⁠(opens in a new tab or window) 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.

Sometimes, a simple and classic solution similar to the one featured on Print Mor’s website⁠(opens in a new tab or window) 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.

Check out Less Rain Berlin’s website⁠(opens in a new tab or window). 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.

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⁠(opens in a new tab or window) 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⁠(opens in a new tab or window) template.

As you create background patterns, don’t forget that you can combine them with other visuals to produce great work. Check out Combadi’s⁠(opens in a new tab or window) 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⁠(opens in a new tab or window) or gradient.

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⁠(opens in a new tab or window) template.

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⁠(opens in a new tab or window). Get the look with the Beige and Black Curated Editorial Fashion Photography Photography Website⁠(opens in a new tab or window) template.

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!