What is a Gradient Background?
A gradient background is a variation of similar colors arranged from lightest to darkest or visa-versa which can be linear (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 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 which will be set to repeat down the page until it fills up the page:
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 has to be provided in an image format and the color on one end of the image is 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).
- 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
A gradient background designed for 800x600 resolution with no repeat horizontally viewed at 1024x768 resolution with a white background on the page.
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, so 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:
Designing a gradient background image
In order to design a gradient background you need a graphics program that produces gradient colors (I designed this gradient background in Photoshop).
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 an 800 resolution page make the image 760 picxels wide to allow for the scroll bars on the browser and for a 1024 resolution make the image 984 pixels wide.
Step 2: decide on colors
Now you need to decide on the colors. If you are using black text on the page you don't want the darkest shade to be so dark that the text won't show up and the same if you are using light colored text for the lightest end of the background. See the sample background at on the right (or top of page); notice how the text on this sample page almost dissapears on top of the darker background on the left side so a lighter blue or white 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 (in Fireworks it is behind the Paint Bucket 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--keeping 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 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 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 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. If you choose to save the image as a .jpg select millions of colors instead of thousands. If your background is still banded try adding a tiny bit of noise to the image.
Step 8: enter code on page
Change the code in the body tag as follows:
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:
To prevent the background image from repeating to the right and only repeat downwards add this code after the above text:
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:
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 div boxes.
Lori's Web Design
Copyright © 2004 - Updated 5-13-17.
All Rights Reserved.
Main Tutorials Page | Photoshop Tutorials | Fireworks Tutorials
Other Graphics Tutorials:
How to Make a Watermark on Photos | Straighten Distorted Photos | Emboss Images | Feathered Edges How to Design a Gradient Background | How to Design a Textured Background
How to design a Vertical Background | How to Make An Animation