I haven’t written any Photoshop tutorials for a while. Today I’m going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color skins. It is particularly useful for creating customizable and dynamic templates (see demos).

What is so cool about this?

With transparent pattern image, users can easily customize the background color by altering the hex color.


Photoshop Trick: Extracting Pattern

This Photoshop trick works on most pattern images. For this demonstration, I’m going to use a tiled pattern image below. Follow the steps below to extract the pattern from the image. You will learn how to use Photoshop Channels to create selection.

pattern image

Step 1

First you have to turn the image layer to black & white (go to Image > Adjustments > Destaturate). Then go to Image > Adjustments > Levels. Slide the: shadow, midtone, and highlight stopper to adjust the level. The goal here is to make the transparent area completely white.

image levels

Step 2

Now you should have a black & white pattern. Go to Image > Adjustments > Invert (or press Cmd + I for shortcut). Select all and copy the pattern. Go to the Channels palette, add a new Channel and then paste the pattern into the Channel layer. Remember: the white pixel in the Channel layer will be the selection.


Step 3

Go back to the Layers palette. Create a new layer. Go to Selection > Load Selection and select the Channel that you’ve just created in the previous step. Then fill the selection with a solid color (eg. black).

load channel selection

Shortcut tip for loading the Channel selection: hold down the Cmd key and click on the Channel layer thumbnail. Learn more Photoshop shortcuts here.


To control the instensity or the darkness of the pattern, adjust the layer’s opacity.

image opacity

Final (see demos)

Save the final pattern as a transparent PNG file. Now you may use CSS to easily change the background color to any hex code.

.pattern {
	background-image: url(pattern.png);
	background-color: #666;


1 3 4 5
  1. Afzal
    May 27, 2013 @ 12:06 pm

    Wow!,,Look so great and interesting,,Thank you much!,,,,


  2. Logo Design UK
    Jun 2, 2013 @ 7:27 am

    I’ve always been a big fan of damask background styles but can never find a colour to suit. This will help!


1 3 4 5

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.