7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Visuals

The What, Why and How of Textures in Web Design

Scroll to top
Read Time: 22 mins

The use of textures and patterns in webdesign has come a long way in only a short amount of time. From cliche grunge and gaudy vintage textures, today's best websites use texture in a wide variety of ways to create a more immersive experience, define the personality of the site and create a more refined look and feel.

In today's tutorial, we're going to jump straight into some of the ways that you can use texture and patterns to enhance your next design, serve up some inspiring examples of textures used in the right way and also provide a series of mini tutorials to give you an introduction to some of practical ways to include textures in your next project.

Ready to get started?

Terminology: Textures Vs. Patterns Vs. Background Images

Before we get started, let's take a moment to quickly define the difference between textures, patterns and background images. While the terms are often used interchangably, there are subtle differences between the three that will help you think about the best solution for your designs.


Generally speaking, patterns are small, simple, image-based and are repeatable on both the x and y axes. In fact, 'patterns' can be generated in only a few pixels — and as such are usually extremely light weight in terms of file size.

Here's a few examples of some simple tiled patterns along with the corresponding image that was used to create the pattern file zoomed in 3200%.

A Selection of patternsA Selection of patternsA Selection of patterns


Textures by comparison are usually more complex, have a stronger sense of randomness but, similar to patterns are often designed to be repeated (but this is not always the case).

While patterns most certainly have their place in modern webdesign, it's the creative use of textures that is really capturing the imagination of webdesigers the world over.

Here's a small sample of examples to give you an idea of the difference between textures and patterns:

A Selection of texturesA Selection of texturesA Selection of textures

Background Images

Background images are a completely different beast. At least for the purpose of this tutorial think of background images as non-repeating, large and detailed images, illustrations and photographs. While this is an over the top generalization, it serves to illustrate the difference between textures, patterns and background images.

Let's Make Some Noise

Noise is one of the most popular use of texture in webdesign today and can be used to add depth and interest to almost any element in almost any design from backgrounds to buttons.

The effective use of noise lies in the subtlety of its application. Good noise should be almost indistinguishable to the eye while still breaking up a solid color with small variations of light and dark.

Let's take a look at a traditional utilization of noise in the wild from www.kendoui.com.

Noise Example from www.kendoui.comNoise Example from www.kendoui.comNoise Example from www.kendoui.com

This example is effective thanks to the use of simulated lighting to create additional depth and visual interest to the overall design. Also note that the highlighted areas of the page give the content area a sense of definition without using a traditional 960px wide solid block color content area.

In a similar vein, Matthew Price has used creative lighting effects to highlight his different services and is another great example of how to take a simple noise texture to add a real point of difference to a site:

Noise Example from www.articodesign.comNoise Example from www.articodesign.comNoise Example from www.articodesign.com

Mini Tutorial: Creating Noise in Photohop

Now that we've seen a couple of examples, let's take a look at how to create a simple noise effect in Photoshop:

Step 1: Starting Off

Create a new document 150px x 150px with a transparent background.

Noise Tutorial 1Noise Tutorial 1Noise Tutorial 1

Make a selection of the document (Ctrl + A), and add a Color Overlay of #007dba.

Noise Tutorial 2Noise Tutorial 2Noise Tutorial 2

Step 2: Bring the Noise

Create a new layer (Ctrl + Shift + N) and fill it with #000000.

Next, generate a noise filter (Filter → Noise → Add Noise) and input the following settings:

Noise Tutorial 3Noise Tutorial 3Noise Tutorial 3
Noise Tutorial 3

Step 3: Blending the Noise

Next, turn the noise texture monochomatic by adding a black and white adustment layer (Layer → Adjustment Layer → Black and White) (note, this is the preferred option to turning the noise gray-scale; the 'monochromatic' setting in the noise generator strips away half tones):

Noise Tutorial 4Noise Tutorial 4Noise Tutorial 4

To limit the effect of the adjustment layer to only the noise layer (not the blue layer), create a clipping mask to the adjustment layer by right clicking the adjustment layer and selecting Create Clipping Mask.

Noise Tutorial 6Noise Tutorial 6Noise Tutorial 6

With the Noise layer selected, change the blend mode to Overlay and dial the opacity back to between 5%-8% depending on the base color.

Noise Tutorial 6Noise Tutorial 6Noise Tutorial 6

Step 4: Finishing Touches

For an optional finishing touch, add another layer above the base color, take the fill to 0% and add a black-to-white linear gradient with a blending mode set to linear burn and an opacity of 15%:

Noise Tutorial 8Noise Tutorial 8Noise Tutorial 8

Textures for True to Life Effects

Textures can also be used more explicitly to create true-to-life effects to create the illusion of the look of real world effects. Also known as Skeuomorphism, this effect has proved itself to be a enduring trend in interface design.

This approach can be used to create extremely literal representations, as seen in the following example from Dribbble user Tom Creighton:

Dials From Tom CreightonDials From Tom CreightonDials From Tom Creighton

In particular, note not only the detailed wood texture, but also the realistic metallic gradient for the dials and the effective use of shadow.

Skeuomorphism doesn't always have to be so literal. In the following example, the copy and content strategists from Six11Ink have used a paper texture to create the illusion that the site is actually rendered on quality stock rather than a screen — a perfect pairing with the company's business focus of written content.


Mini Tutorial: Create a Realistic Fabric Ribbon in Photoshop

Love 'em or hate 'em, the chances are pretty good that you'll be creating a life-like ribbon in a future project. In this mini-project, we'll be creating a realistic fabric ribbon in Photoshop with the help of a pattern library.

Step 1: Create a New Document

Create a new document (Ctrl + N) 150px x 300px and fill it with white:

Ribbon Tutorial 1Ribbon Tutorial 1Ribbon Tutorial 1

Layout some guides (Ctrl + R) with the following locations (from the edge of the document).

Ribbon Tutorial 2

Step 2: Draw Out a Ribbon Shape

On a new layer, and with the pen tool set to 'Shape', draw out the following shape using the intersections of the guides to help you. Note that the top edge of the ribbon exceeds the top of the document.

Ribbon Tutorial 3Ribbon Tutorial 3Ribbon Tutorial 3

Step 3: Download the Texture

Download the Classy Fabric texture from Subtle Patterns.

Ribbon Tutorial 4Ribbon Tutorial 4Ribbon Tutorial 4

Once you've extracted the file, open the .png image in Photoshop. Set the image as a pattern (Edit → Define Pattern).

Step 4: Add the Texture to the Ribbon

Return to your Ribbon.psd document and apply the Class Fabric texture as a layer effect to the ribbon shape:

Ribbon Tutorial 6Ribbon Tutorial 6Ribbon Tutorial 6

Step 5: Layer Effects

Duplicate the main ribbon shape to a new layer (Layer → Duplicate Layer) and name it 'Ribbon Effects'.

Apply the following layer effects:

Ribbon Tutorial 7Ribbon Tutorial 7Ribbon Tutorial 7

Ribbon Tutorial 8Ribbon Tutorial 8Ribbon Tutorial 8

Ribbon Tutorial 9Ribbon Tutorial 9Ribbon Tutorial 9

Ribbon Tutorial 10Ribbon Tutorial 10Ribbon Tutorial 10

Ribbon Tutorial 11Ribbon Tutorial 11Ribbon Tutorial 11

Ribbon Tutorial 12Ribbon Tutorial 12Ribbon Tutorial 12

Ribbon Tutorial 13Ribbon Tutorial 13Ribbon Tutorial 13

Step 6: Add a Subtle Glow

Duplicate the main ribbon shape again and place it at the top of your layer stack. Apply a 0% white opacity → 100% white opacity gradient with the following settings:

Ribbon Tutorial 14Ribbon Tutorial 14Ribbon Tutorial 14

Step 7: Finishing Up

To finish up, return to your bottom most layer (i.e. the document background) and apply the following gradient:

Ribbon Tutorial 15Ribbon Tutorial 15Ribbon Tutorial 15

You should be left with the following final result:

Ribbon Tutorial 15Ribbon Tutorial 15Ribbon Tutorial 15

Textures to Add Visual Interest

While solid block colors have been a mainstay of effective webdesign for years (and certainly still have a place in modern design), increasingly designers have been employing the creative use of textures to add additional visual interest to the components of their projects.

The result is often a more sophisticated, polished solution that can tone down and add additional refinement, especially where a solid block of color can either overwhelm or dull down the overall impact of the site.

Take this example from Solid Giant that has used a fairly simple texture to break up a bold color choice:

Solid GiantSolid GiantSolid Giant

Does this particular design leave you seeing red (or pink)? Textures don't always need to be so overt. Let's take a look at a more conservative use of textures in our very own Tuts+ Premium:

Textures from Tuts+ PremiumTextures from Tuts+ PremiumTextures from Tuts+ Premium

Looking at the uppermost magnification, we can see the use of three distinct textures that are used to define the different sections of the page (the header, the body background and the splash window). While block colors could have easily been used here, the use of texture adds an additional layer of attention to detail and intricacy to the design.

Also worth noting is the choice of complementary textures used — the textures of the header and the body background share a similar geometric base, use a similar scale share the 45 degree base plane. All of these elements add to the harmony of the overall design.

There are hundreds of examples of effective uses of simple textures to enhance a site's overall aesthetic. Let's take a look at one final example from Visual Republic.

Visual RepublicVisual RepublicVisual Republic

While it's always best to exercise restraint when employing any design pattern, this example strikes the perfect balance between coherent design amd visual interest while remaining reserved and tasteful.

Mini Tutorial: Modify and Colorize a Texture

There are lots of resources online where you can download images and .pat files for unrestricted use for your personal and commercial projects. In this mini tutorial, we're going to load up Photoshop with a complete bank of modern, tasteful textures and modfiy a texture to match our design needs.

We're going to be taking some inspiration from the Solid Giant example and we'll be using the excellent texture library from Subtle Patterns.

Step 1: Download and Install the Texture Library

Head on over to the Subtle Patterns website. While you can browse for and download your favorite textures individually, you can also download the entire current library from Github.

Scroll down to the bottom of the Subtle Patterns site and click the 'Get it on Gihub'. Download the repository and unzip the files to your hardrive.

Download the Subtle Patterns LibraryDownload the Subtle Patterns LibraryDownload the Subtle Patterns Library

Next, open up photoshop and enter the preset manager (Edit → Presets → Preset Manager)

Select 'Patterns' from the drop down select box and click 'Load'. Select the SubtlePatterns.pat file from the downloaded and extracted library (../subtlepatterns-SubtlePatterns-xXXXXX/SubtlePatterns.pat/SubtlePatterns.pat).

Great! You've now added the entire Subtle Patterns texture libary to your Photoshop patterns Which in my opinion will serve you far better for your projects than the Photoshop default pattern library!).

Step 2: Create a New Document

Create a new document (Ctrl + N) 500px x 500px with a white background:

New Document 500px x 500px, White BackgroundNew Document 500px x 500px, White BackgroundNew Document 500px x 500px, White Background

Next, add a pattern layer to the document (Layer → New Fill layer → Pattern...)

Add a Pattern LayerAdd a Pattern LayerAdd a Pattern Layer

From the newly downloaded pattern libary, select 'Bright Squares'

Select the Bright Squares PatternSelect the Bright Squares PatternSelect the Bright Squares Pattern

Step 3: Adjustment Layers

One of the first things that you'll notice about the Subtle Patterns library is that almost all of the textures are monochromatic and are either dark or light. While this is great for a design that is based on shades of blacks and whites, it makes it more tricky to colorize the texture.

We'll be turning this very light texture bright blue in a few steps' time, but to start with, we'll need to tweak the curves, contrast and saturation of the texture.

First, add a new Curves layer (Layer → New Adjustment Layer → Curves) and modify the input to 132 and the output to 109.

Add a Curves Adjustment LayerAdd a Curves Adjustment LayerAdd a Curves Adjustment Layer

Next, add a new Hue/Saturation layer (Layer → New Adjustment Layer → Hue/Saturation) and change the hue to 360, the Saturation to 100, the lightness to -28 and check the 'Colorize' box.

Add a Hue/Saturation Adjustment LayerAdd a Hue/Saturation Adjustment LayerAdd a Hue/Saturation Adjustment Layer

Next, add a Levels adjustment layer (Layer → New Adjustment Layer → Levels) and change the black threshold to 30, the gray threshold to 1.1 and the white threshold to 200.

Add a Levels Adjustment LayerAdd a Levels Adjustment LayerAdd a Levels Adjustment Layer

Finally, add a Brightness/Contrast adjustment layer (Layer → New Adjustment Layer → Brightness/Contrast) and change the brightness to -10 and the set the contrast to 10.

Add a brightness/contrast Adjustment LayerAdd a brightness/contrast Adjustment LayerAdd a brightness/contrast Adjustment Layer

Step 4: Colorize the Texture

In your layer stack, add a color fill layer (Layer → New Fill Layer → Solid Color...) and set the color to #00b4ff. Set the blending mode to 'Color' and keep the opacity at 100%.

Add a Color Layer -- #00b4ffAdd a Color Layer -- #00b4ffAdd a Color Layer -- #00b4ff

Note, depending on your color choice for the final color overlay, the adjustment layers will all need to be individually tweaked and trial and error may be required.. Because of this reason, sometimes it is easier to add the color overlay first and backfill the adjustment layers so that you can preview the final result while you play with the settings of the adjustment layers.

Step 5: Add Patterned Text

Now that we've created our colorized and adjusted texture, let's complete this mini-project with some patterned text.

Using a bold display typeface (I'm using Bebas Neue), write out the word 'Texture' in the center of the document:

Add Some TextAdd Some TextAdd Some Text

Next, above the text layer add in a new pattern layer (Layer → New Fill Layer → Pattern) and select 'Concrete Wall 2' from the pattern library.

Add a new pattern LayerAdd a new pattern LayerAdd a new pattern Layer

To constrain the pattern to the text, we'll be using a clipping mask. With the pattern layer selected, create a clipping mask (Layer → Create Clipping Mask).

Add a Clipping MaskAdd a Clipping MaskAdd a Clipping Mask

Step 6: Finishing Layer Styles

To complete the look of the text, add the following layer styles to the text layer:

Add an Inner ShadowAdd an Inner ShadowAdd an Inner Shadow
Add a Drop ShadowAdd a Drop ShadowAdd a Drop Shadow

Final Result

Our final result:

Final ResultFinal ResultFinal Result

Textures to Define a Certain Look, Tone or Feel

We saw how designers are using textures to simply add visual interest in the previous example. Taking this idea one step further, textures can also be used to define a particular look, tone or feel that is consistent with the overall design concept of the site.

Take for example the website from i-Avion, a French flight comparison website.

i-avion 1970s texturesi-avion 1970s texturesi-avion 1970s textures

The main illustration and headline font give the site a distinct retro look and feel, while still feeling fresh and modern. What really brings the 1970's feel alive, hovever, is the use of a simple blue and white polka-dot background and a stylized starburst that are both consistent with design patterns used frequently in mid-century print media.

If you were to extract just the illustration and the header and remove the textures, this retro look and feel would be diluted at best and, at worst, not conveyed at all, since neither the font choice nor the illustration are sufficiently stylized to carry the entire design.

Another effective example of textures being used to communicate a design aesthetic from another time can be found on the site of Onst Creative.

Again, illustrations have been heavily used to do the grunt work of conveying the look and feel of the site, but as always, the devil is in the details:

Heavy Noise over at Onst CreativeHeavy Noise over at Onst CreativeHeavy Noise over at Onst Creative

The site uses heavily a grainy noise texture over most of the elements in the site of the site from the background to the illustrations to the headers. This widespread use of a raw texture accompanied with consitent font choices and mid-century design patterns lends to a user experience where the site visitor feels more like they're leafing through a dime-store comic book from the 1950's as opposed to viewing the site on their new Retina display.

Simple Repeating Pixel Patterns

Up to this point, we've mainly focused on the application of textures in website design. No article on this topic would be complete without a look at the use of repeating pixel patterns in website design.

As we talked about earlier, it doesn't get much simpler than pixel patterns. Often only taking up nine or 16 pixels (or even smaller), pixel patterns can be used for dramatic effect.

For our first example of pixel patterns in action, let's take a look at the site from Outside The Wire, a U.S. theater company.

Pixel Patterns from Outside the WirePixel Patterns from Outside the WirePixel Patterns from Outside the Wire

The site features an arresting full width and height photograph, a design pattern that is becoming more popular as users' bandwidth and screen sizes increase across the world. While this is a dramatic design concept, it's important to remember that it's the site's content that is the important thing... and with such a high-resolution image, it could be easy to lose important elements like the navigation and main logo in the colors, tone and contrast of the image.

To remedy this problem, the designers of this site have overlayed a very small repeating grid (12px by 12px and a whopping 1KB to be exact) that reduces the impact of the image and increases the contrast between the background and the design elements of the site.

Another popular application of pixel patterns in website design is to add additional contrast to header tags, especially titles for blog posts and other similar content.

Remember the TutsPlus example that we saw before? Let's take another look at the way their H2 tags are styled:

Repeating Patterns for Header TagsRepeating Patterns for Header TagsRepeating Patterns for Header Tags

As you can see, the use of a pixel pattern gives a more refined, interesting look than just the use of a solid block color. And because this particular pattern repeats itself, it is able to scale to multiple lines and even different lengths, if required.

Let's create a similar effect in our next mini-tutorial:

Mini Tutorial: Style a Header With a Pixel Pattern

For this small project, we're going to be adding a little extra finesse to a blog post title through the use of CSS... and no image files.

I'm going to keep this example pretty basic and just show you the main techniques... There's a lot of scope for further styling here, so feel free to experiment.

Step 1: Create a Pixel Pattern in Photoshop

Fire up photoshop, create a new document (Ctrl + N), 12px by 12px with a transparent background.

Create a new documentCreate a new documentCreate a new document

With a 1px by 1px black square pencil (B), draw out the following pattern (I've used a 1px grid to help me here).

Create the patternCreate the patternCreate the pattern

Next, export the image as a PNG-24 image (Ctrl + Shift + Alt + S) and save it to your desktop.

Step 2: Convert the Pattern to a Data URI

In this project, we're going to be applying the pattern as a data URI — a representation of the PNG file in pure data that the browser can render as an image. This is an optional step (you could just use an image), but using this technique reduces an http request and is a perfect application for a small image file like this one.

Head over to the Resources section at Web Semantics and load up the image into the URI converter:

Convert the image to a Data URIConvert the image to a Data URIConvert the image to a Data URI

In the following screen, take the background-image code from the 'As Raw Data' window and copy it to your clipboard:

Copy the Data URI to your clipboardCopy the Data URI to your clipboardCopy the Data URI to your clipboard

Step 3: Markup and Style a Basic Blog Post

Next, fire up your text editor and markup a very simple blog post:

In the head of the document, create a style tag and define some basic styles (or create a new css document and link to it in the document head):

Step 4: Style the H2 Background

In this step, we're going to give our H2 tag a background with our newly created Data URI.

In your CSS, add in the following code, using the raw data from the converter from the previous step:

While this should be fairly self explanatory, there are a couple of notes to be made.

Firstly, separating the h2 content from the background inside the pseudo :before element allows us to set some padding for the text and play with the opacity of the background image. On different background colors, we may choose to increase or decrease the opacity as required, which allows us to use a single data URI across an entire site, rather than generating multiple .png files and converting each to its own base64 encoded image.

Secondly, the ability to position the background behind the h2 text is made possible by setting the <article> position to relative and the <h2:before> element to absolute.

Final Result

Here's a screenshot of the final result, or you can play with the JS Fiddle here.

Final ResultFinal ResultFinal Result

Don't want to use Photoshop? You can also recreate this mini-project using Patternify — an online pattern generator that even looks after the Data URI conversion!

Textures to Make a Big Impact

So far, we've talked mainly about subtle, unobstructive patterns that complement and enhance an existing design, but that do not necessarily make a big design statement in themselves. In this section, let's take a look at a couple of examples where the textures or patterns are used make a big impact in and of themselves.

For example, take the recent redesign of the National LGBT Museum. This design uses multiple patterns and textures with great effect, and in fact the site could have been used to highlight the use of textures and patterns in some of the other sections of this article. What I want to highlight here is the bold use of a simple patten in the contact section of the site:

The Contact Section of the National LGBT MuseumThe Contact Section of the National LGBT MuseumThe Contact Section of the National LGBT Museum

Note how the design balances a bold repeating pattern with lots of white space to balance the site and to provide a user experience that is arresting but not overwhelming.

In another example, let's take a look at Pop The Box, another site that effectivly combines bold and subtle textures to make a dramatic statement:

Pop The BoxPop The BoxPop The Box

Subtle fabric textures balance out a bold tartan site background that complement the site content and provide a clear direction to the site user to the purpose of the site.

Mini Tutorial: Who Needs Photoshop?

So far, we've looked into creating textures and patterns in Photoshop, exporting the images and using them as repeating background images in CSS.

In this mini tutorial, we're going to be approximately recreating the tartan texture in the previous example... but we're only going to be using CSS gradients with no images at all.

As a caveat before we get started, there are advantages and disadvantages of this approach. While we're reducing the need for additional site resources and reducing HTTP requests, both of which can affect site performance, this approach doesn't reach the level of pixel perfection achievable with an image editor. The result can be rendered differently in different browsers and will require a fall back for IE8 and below. So use with caution!

Step 1: Markup

The markup for this mini project is dead easy. All we need to do is to create a div with an arbitrary height of 600px that will contain the repeating gradient background:

And now, the base css:

Step 2: Create the First Half of our Gradient

This background is going to have two overlapping gradient overlays made up of multiple stops, one at 45° and the second at -45°.

Let's create the bottom most gradient first:

Note, for simplicity's sake, I'm only including -webkit prefixes in this example. You'll need to include appropriate vendor prefixes for additional browsers.

Step 3: Create the Second Half of the Gradient

The final step of this technique is to take the gradient that we've already created and replicate it exactly with the exception of changing the angle of the linear gradient to -45°.

Thanks to the cascading nature of CSS, the second gradient will naturally be rendered on top of the first gradient without the need for changing the z-index of the properties. Also, because we've chosen rgba to define the colors of the gradient, we don't need to pay any consideration to the opacity of the element.

Final Result

Our final code:

Here's an image of the final result:

Final Result of The ProjectFinal Result of The ProjectFinal Result of The Project

Or, you can view the code and edit it live on JS Fiddle

As a final note, if you want to create an even cleaner result, or push the bounds of the possibilities of image-free pattern design, you can achieve excellent results using the canvas element and the Patternizer.js script. It's a more complex way of achieving the result shown above, but it may be a better solution depending on your needs.


If you've followed along with the mini-tutorials in this article, you'll be well armed with some of the more progressive applications of textures and patterns in website design — as well as hopefully taking inspiration from a wide range of some of the best examples available.

Of course, we've only just scratched the surface of the use of textures and patterns in webdesign. Every day, innovative designers are pushing the boundaries of the use of textures in their projects with stunning results.

How have you used textures and patterns in your designs? What are your favorite techniques? Leave a comment — we'd love to hear your thoughts!

Further Resources

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.