Get inspired to refresh your website and try out new designs with this list of 20 websites with gorgeous patterned backgrounds.
Navigating the web in the mid-to-late ‘90s meant you’d stumble across many a tiled or patterned background. The crude designs and loud colors earned patterns a bad reputation in the realm of web design for many years, and since then designers have opted for solid colors, gradients, and a generally more muted approach.
Today, however, patterned backgrounds designed by professionals can be a welcome addition to any website whose brand calls for some creativity and originality. A quick visit to your local brewery’s website or the online portfolio of a seasoned graphic designer will reveal a wide selection of tantalizing patterns you may want to use as inspiration for your website’s background.
We’ve collected some of the best examples of patterned backgrounds in web design so you can determine what you like and what you don’t as you find inspiration for your homepage redesign. Keep reading for some fresh patterns and exciting design ideas.
Jarritos gets everything right on their website: the large-scale pattern replete with fun illustrations creates a vivid brand personality in an instant. The combination of their soft but high-impact fonts and the patterned background sets a distinct retro tone that modern audiences love. Plus, the tinkling sounds that occur when visitors run their cursor over the soda bottles awaken the senses, making them crave a bottle of Jarritos.
This highly original web design concept layers a simple polka dot pattern over an image of the two designers that formed Garbett. As you scroll down the website the pattern fades away to reveal photos, but the cursor is replaced with a colorful and large vector illustration of an eye. This South African duo certainly make their design prowess known right away.
3. Cultural Solutions UK
Combine patterned backgrounds for maximum effect: the website for Cultural Solutions UK starts with a gray textured background and adds a colorful array of circular patterns that actually follow the cursor around the screen. The imagery acts as a metaphor, with the strong circles representing the independence and totality of the services offered by the not-for-profit organization.
4. Gelateria Savoia
The intricate pattern on the website of Gelateria Savoia ice cream and confectionery shop in Italy almost seems like wallpaper in an elegant dining hall from 100 years ago. This sophisticated pattern reflects the craftsmanship of the brand’s signature cakes. The style of the pattern also brings the date of Gelateria Savoia’s establishment, 1939, to the forefront of the visitor’s mind.
5. Pointless Corp
Some of the best pattern choices don’t even seem like patterns unless you give them a second look. The varying shades of the speckle pattern on the website of digital agency Pointless Corp require a close look to spot the repeating details, but the nuanced approach to the background gives the website depth and texture.
6. Vector Mill
Vector Mill specializes in providing seamless patterns and vector textures to web designers. As such their choice of a repeating wood pattern to create the impression of a crate on their website makes complete sense. The wooden crate pattern stands in for their package offerings, called “crates,” and also extends the brand image of a mill.
The homepage for Bzzy, a text-message autoreply app, immediately wins over visitors with vibrant yellow and golds that contain a gentle faded pattern of circles and bars to add dimension. The header pattern of a honeycomb is a wonderful touch that reinforces the app’s slogan: “Tell your friends to buzz off. But in a nice way.”
ECHO is a PR firm in Manchester that went with a daring patterned background for their website. The thin lines placed close together overlaid atop large gray block font create a bit of an optical illusion that’s difficult to stare at for more than a couple of seconds. The effect forces you to scroll toward the key information below. There’s also a toggle that inverts the blacks and whites on the screen, offering an interactive element.
9. Jamie Wolfond
If you fall in love with multiple patterned background options why compromise? Designer Jamie Wolfond’s website alternates between five very different patterns and animations any time the visitor clicks the mouse or moves the cursor out of the window. Each pattern features quirky imagery that, when taken together, create a unique web design experience.
10. Scribble & Tweak
This background is yet another example of a subtle pattern creating texture – you have to navigate to the Scribble & Tweak website to notice the grid pattern on the dark gray background. Stan Grinapol, the digital product designer who owns the website, contrasts the imagery of scribbling with an exact grid for a website that’s visually appealing.
Raise the Roof Productions is a Scottish TV production company with an attractive and friendly website. Part of the charm of the site lies in the oversized header and footer that vertically bookend the homepage with a swirl patterned background. The imagery evokes the dazzle of the entertainment business and complements the overall design.
When you restrict yourself to a black-and-white color palette you can go bolder with the designs in your patterns. Case in point: Fixate’s entrancing patterned background on their website showcases everything from chickens and paint cans to ponies and cursors while maintaining visual continuity. The web design professionals even have the eyes in the central animal face swap designs intermittently to give the impression of a wink.
Visual tricks and compelling use of patterns can keep a visitor engaged with your website for many precious seconds, urging them to scroll and read more before navigating away to another site. Such is the case with Borheh’s website. The creative studio based in London employs a spinning circle pattern with black and white stripes to create a hypnotic display that causes you to pause as you anticipate the stripes realigning as the circle spins.
One of the most frequently cited examples of an effective patterned background is this evocative purple design on the website for Alfred, a productivity app for Mac OS X. The background works so well due to the accompanying font and image – the strong contrast of the purple, black, and white creates a clear brand image that is both professional and approachable.
The Portuguese digital marketing and web design agency GS3 chose a highly “pixelated” patterned background for their website that keeps the emphasis on their chosen color gradient by avoiding complicated shapes and illustrations. A burst of color is never a bad idea in web design, especially to add energy to dry or technical copy on your homepage.
16. Kelli Anderson
The geometric patterned background on designer Kelli Anderson’s website is straightforward but effective. Sometimes less is more – the pattern here connects with her choice of headline font to create a cohesive texture to the website without distracting the reader. Anderson’s background appears on multiple online roundups, as this website is a great example of what a simple pattern can do for your web design.
17. Sourisseaux Partners
When in doubt, try implementing a patterned background with movement. Just use the featured background for the corporate psychology consulting firm Sourisseaux Partners for an idea of the possibilities: The flag-like image seems to shimmer and flap as the cursor moves across the space.
Wiski, or “The Ski Encyclopedia” is an online community for everyone in the snow sports industry. The background features a repeated monochromatic pattern of a mountain’s elevation map as an ingenious method of incorporating texture into the website design. Check out the website for inspiration on how to make vivid patterns more subtle through color choices.
19. IconSweets 2
If you have the opportunity to showcase your product offering in your choice of patterned background, go for it! IconSweets 2 is a set of custom designed icons, so naturally the green background on the website features a spacious collage of some of their finest icons. Incorporate your products into your background for brand reinforcement.
20. Sam Skinner
This last example is a bit of a stretch, but we couldn’t resist showing you Sam Skinner’s incredible website. When the site loads various small icons populate in random areas of the screen, and as your mouse hovers over the icons a dotted line follows your path, connecting the icons as you travel around the homepage. This curator and artist, in collaboration with Dow-Smith Studio, found a way through pattern and design to make an impression with minimal elements.
You may be leaning toward a solid black or white background for your website, but don’t underestimate the power of a well-designed patterned background. Use these examples as inspiration to stand out from the competition.
You can find millions of high quality backgrounds for your website on Shutterstock. From geometric vectors perfect for the tech industry, to illustrated motifs that could work for any small business, the Shutterstock collection has everything you need to give your homepage a unique look that draws in customers.
Top Image by Shutterstock contributor gudinny