How to Make a Gradient Background with Images in Adobe Photoshop

A gradient background made from an image provides a colorful background for any web page. However there are several problems using images for a gradient background that you need to consider, as shown below. This technique is usually only available in a graphic desgin program like Adobe Photoshop or Adobe Fireworks.

If you don't want to use images as a background you may prefer to Use CSS to Design your Background instead of images.

What is a Gradient Background?

A background gradient is composed of similar colors arranged from lightest to darkest or visa-versa. It can be designed as a linear gradient (horizontal or vertical) or a circular gradient or in a more complex arrangement like a rainbow of colors. It can then be used as the background for a web page or within boxes, like under a menu.

A typical Blue Linear Gradient Background

web page with blue linear gradient background

A linear gradient image, with colors that merge horizontally, can be about 5 pixels high and as long as the page is wide. The image below is a shortened version of a blue gradient background (so it will fit on this page) which will be set to repeat down the page until it fills up the space:

blue gradient background gif

See below for instructions on how to design a gradient background.

Problems with using a gradient background on a webpage

  • The text needs to be a different shade than all variations of the background or it won't show up on the page.
  • A gradient background in an image format with the color on one end darker than on the other end which means you cannot allow the image to repeat or the image will repeat with the darker edge next to the lighter edge (see sample below).
  • A gradient background image has to be the same width or height as the page or the image will repeat with the result above (this means you can use it on a mobile design -- see a tutorial for using CSS to design a background image that works on mobile sites).
  • The image needs to be saved as a .jpg, or older computers using only 256 colors (or the image saved as a .gif) will not see evenly blended colors from one shade to the other but different shades of color placed next to each other.
  • The web page or table or box with the gradient background needs to be set at a specific width, because if it's set at 100% the page will increase in size but the image will repeat to fill the space with the resulting dark edge next to a light edge as explained above.

Gradient Background Samples in Different Resolutions

blue gradient background designed for 800 viewed at 1024
A gradient background designed for 800x600 resolution with no repeat horizontally viewed at 1024x768 resolution with a white background on the page.
    blue gradient background designed to repeat horiz.
A gradient background designed for 800x600 resolution with a horizontal repeat viewed at 1024x768 resolution.

Other Options for a Horizontal Gradient Background
to fit all Resolutions

  • You could provide an alternate plain color background matching one of the colors on the end of your image for problems mentioned above in CSS Tips. When using CSS you can apply both a background color and background image so where the image ends the background color takes over.
  • You could also apply the background color to the CSS and the image to a centered Table the width of the smaller resolution that you want to display. Then the background will show where the image doesn't. The problem with a horizontal gradient background is that you can't match the colors on both ends.

If you think you can work around the above problems then try a gradient image as follows:

Create a gradient background image

In order to create a gradient background you need a graphics program that produces gradient colors (I designed this gradient background in Adobe Photoshop however you should be able to use these instructions for other graphics programs like Adobe Fireworks).

Step 1:

Select "file/new" and set the width you have chosen for the new image and about 5 pixels for the height and set the background as transparent. For for a 1024 resolution screen make the image 984 pixels wide to allow for the scroll bars on the browser.

Step 2: decide on background colors

page with blue background

Now you need to decide on the colors. If you are using black text on the page you don't want the darkest shade in the background to be so dark that the text won't show up. The same is true if you are using light colored text for the lightest end of the background gradient. See the sample background on the right (or up higher on this page); notice how the text on this gradient sample page almost disappears on top of the darker background on the left side. A lighter blue or white colored font would have been a better choice.

Step 3: select the image

Select the image with the retangular marquee tool .

Step 4: activate gradient tool

Click on the gradient tool.

Step 5: choose gradient colors

Make sure your "gradient tool options" box is open and, if not, select "window/show options" or double click on the gradient tool (this may be slightly different on your version of Photoshop but there should be a box with graduated colors in it now. These colors are determined by the colors you have selected for background and foreground.

Choose different colors for background and foreground and watch the gradient change. Keep in mind what was said above about dark text on a dark background and visa-versa. There are different options of how to arrange the colors in the gradient options window (dark to light or light to dark and different textures) so play around with those till you get the result you want.

For more advanced options choose "help/help contents" and under "Find" search for "gradient fill" and read the instructions. The gradient sample on this page was designed in normal mode, 100% opacity, linear fill with dither selected to prevent banding of the colors.

Step 6: fill the image

Place the pointer/cursor inside the image in left corner and drag to the right and the gradient fill should now be aplied to your image. If it doesn't work make sure the options window is still active and try again, or use your "help" for further instructions.

Step 7: saving the background gradient image

Now save your image. Sometimes, if you view the background on diffrent computers or browsers you will see the different colors separated. This is called banding. A gif is limited to 256 colors unless you select dithering, which will prevent banding and result in a smooth gradient. If you choose to save the image as a .jpg select millions of colors instead of thousands. If your gradient background is still banded try adding a tiny bit of noise to the image.

Step 8: enter code on page

Change the html code in the body tag as follows:

<body background="images/bluegradient.jpg">

If you are using CSS put the following code in the body portion of your CSS file which will tell the browser to repeat the image downwards and to the right:

background-image: url(images/bluegradient.jpg);

To prevent the background image from repeating to the right and only repeat downwards add this code after the above text:

background-repeat: repeat-y;

To fill a table cell with a gradient background make the image the width of the cell and add the following code to the table cell:

<td background="images/bluegradient.jpg">

Now view your page and enjoy!

If you'd rather have a plain colored background with texture check out the Web Design Backgrounds and Texture Tips page.

Gradient Bars as a Border on a Web Page

The same technique as mentioned above was used to make the following gradient bars that frame the top and left side of a logo on a webpage. Once you have the horizontal gradient bar finished then flip it to vertical view and then join them at the top left corner using either table cells or divs.

gradient bars

If you prefer to not use a gradient background see the
Background Textures page for free texture images or this tutorial on
how to set up 2 backgrounds on a webpage.

You may also prefer to Use CSS to Design your Gradient Background .

Lori Eldridge
Lori's Web Design
Copyright © 2004 - Updated 1-13-19.
All Rights Reserved.

Other Photoshop Tutorials

Feathered Edges

feathered edges icon

Embossed Images

embossed petunia

Textured Backgrounds

textured background icon