Background Patterns in Web Design: 30 Beautiful Examples

Oct 12 2011 10 Comments By Jacob Gube

Using repeating, tiled patterns as a background in a web page layout is a popular design technique. When done well, using background patterns can make a web design look sophisticated, intricate and memorable. In this visual inspiration collection, you’ll see 30 websites that use a variety of beautiful background patterns (e.g. diagonal stripes, cross-hatching, dots and so on).

1. iconSweets 2

2. Loysel’s Toy

3. Redefine Sydney

4. Galpin Industries

5. Cake Sweet Cake

6. Burciaga

7. Playground

8. Sunday Best Websites

9. Hollister Co.

10. Pop The Box

11. Visual Republic

12. perkins CSS3 LESS Framework

13. The Crazy Love Campaign

14. Creature Tales

15. Squared Eye

16. Idyllic Creative

17. Sullivan NYC

18. Mind Epic

19. TENTHMIL

20. Tobias Persson

21. Moo’s

22. wakWAW

23. cabedge.com

24. Tapp3 Media

25. Island Creek Oyster Bar

26. Electric Pulp

27. Bzzy App

28. Humaan

29. AdPacks

30. Album Art Collection

Pattern Tutorials and Guides

If you’d like to learn how to create and apply repeating patterns in your work, you should check out these tutorials and resources.

Create an Elegant Patterned Web Design in Photoshop – a tutorial on creating a web page layout with various repeating patterns as the central design theme.
Create a Light Textured Web Design in Photoshop – starting in Step 6 of this tutorial, you will learn how to create an eye-catching mosaic pattern.
Make a Stylishly Elegant Portfolio Web Design in Photoshop – You will learn how to create a custom vintage flower pattern and be able to download a working demo of the web layout for you to study.
Create a Modern Lab Theme Web Design in Photoshop – In Step 5 of this tutorial, you will learn a simple technique for creating the popular diagonal stripe pattern.
Photoshop Patterns: Ultimate Guide – Learn all about Photoshop tools and commands related to repeating patterns.
Creating Abstract Geometric Artwork in Illustrator – You will learn a technique of creating a swatch pattern in Illustrator so that you can easily apply patterns in your work.

Author: Jacob Gube

Jacob Gube is the Co-Founder and Technical Editor of Design Instruct. He also runs the site called Six Revisions, another one of the team's websites. He's a web developer, designer, and author of books on web design and development. If you'd like to connect with him, check him out on Twitter: @sixrevisions or shoot him an email.

10 Comments (Add yours)

Azhmed Dijas

Oct 12 2011

This dude has some epic premium patterns for free http://www.subtlepatterns.com

Reply to comment

Jacob Gube

Oct 14 2011

Editorial Team

Great resource, thanks for sharing it.

Reply to comment

Hiren Modi

Oct 13 2011

How can I implement this kind of background for my eCommerce website? Can you suggest me best tutorials to get it done?

Reply to comment

Jacob Gube

Oct 14 2011

Editorial Team

Generally, you use CSS to apply backgrounds in any web layout (e-commerce or otherwise). I can’t think of any tutorial off the top of my head, but pretty sure there’s plenty out there; try some Google searches.

Reply to comment

Hiren Modi

Oct 14 2011

Oh great! Thanks for your reply. Does it really matter to decrease load time of website?

Reply to comment

camille

Oct 18 2011

Yes load time does matter. Here is an article with an info-graphics that shows how increasing load time leads to visitor loss :
http://blog.kissmetrics.com/loading-time/

adumpaul

Oct 22 2011

Awesome collection of background pattern.

Reply to comment

Dave

Nov 20 2011

Very nice examples of patterns use on websites. I’ve been really interestedin implementing patterns but haven’t learned to blend it in a subtle manner. Thanks a lot for the article.

Reply to comment