Web Page Backgrounds Section Summary - Neils Resource WebWeb Page Backgrounds Section Summary - Neils Resource WebGraduated Backgrounds - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu

Summary of Content
A gradient background provides a colourful alternative background for a web page tables or cells. Just requires the addition of a single tag. The real secret is in the colours you choose to start and end the fill. The more limited the colour range the more subtle the gradient especially over large areas. See the Web Colours Page to choose your own. Some of the examples here use the 'gradientType=0' which defines a top / down gradient. Otherwise you could set it to '1' for a left / right gradient, but this could make complimentary text colouring difficult (unless you adopt a column format as in example 6). One set back here is that you won't get HTML / XHTML validation.
The 'cleanest' way for a gradient background is to develop it in Photoshop or Paintshop Pro and save as .gif / jpeg file, then using the result as a background image. Make sure it is saved at at least 256 colours for a smooth transition. The only problem with this solution is scalability.
 08/2005  Hold everything! Why am I bothering. I mentioned using using a graphics package to produce a 'cleaner', cross browser compatible gradient, but it would involve a lot of messing about. So what do I find....GRSITES.COM have now added a gradient image maker on their site! Just pick your colours, direction of flow etc.. and hey presto, a gradient background as a jpeg file is yours for downloading. A bunch of blue/grey gradient jpegs are located at the bottom of this page.

A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top.

add a Gradient Background
You can use the style tag to create a gradient background effect within your web page. This effect can be used for your entire web page background, or within your table cells. The filter must be applied to an element that has width or height measurements. For example an image, table, table cell. You cannot, for example apply it directly to the <p>, H1, <b>.
The GradientType can equal '0' for top to bottom fill or '1' for left to right fill.
To use the gradient effect as your web page background, use the following BODY tag:
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">
To use the gradient effect within your tables, use the following code within your table tag:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#000080', startColorstr='#FFFFFF', gradientType='0');"
Although you can edit the gradient colours indicated in red, keep in mind, in order for the effect to display properly, you must use a light colour and a darker colour. Don't forget the text colour may need changing to maintain contrast as this text shows.

startColorstr='#FFFFFF endColorstr='#000080' gradientType=0

startColorstr='#FFFFFF endColorstr='#000080'(no table borders)

startColorstr='#FFFFFF endColorstr='#33CC00' gradientType=1 (no table borders)

startColorstr='#FFFFFF endColorstr='#FFD700' gradientType=1 (no table borders)

This is a borderless two row table with the start and end colours of the second row reversed.

This gives a graduation in both directions

This is a multi row table with the start and end colours of the gradient in the last row reversed.

Adding a third or more rows between the two graduated rows with solid matching background gives an area of solid colour for text use.

Be careful though as you can end up with a convex illusion at the edges of the table.

Note that the gradient effect is smoother the greater the area it spans



This is basically the same as the above example except that the 'gradientType' has been set to 1 ( for a left / right hand gradient), the background is navy (#000080) and table borders are removed for a blend to the white page background.


A ready made .jpeg gradient, note its rather weak over small distances despite using the same colours as above. Its worth bearing this in mind when choosing your start and finish colours.

A ready made .jpeg gradient, note its rather weak over small distances  

A ready made .jpeg gradient, note its rather weak over small distances  

Grey/Blue 'Jpeg' Gradients. The higher gradients are more effective over a greater drop.

50 75 100 125 150 175 200 250 275 300 350 400 450 500     750 1000 1250 1500

Last Update:  05/06/2007 - Design - Pages Background Gradient Filter - Neils Resource Web