gradient background effect

Your Guide to Professional
Web Site Design and Development

HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Offering Free HTML Tips, Tags and Codes

gradient background effect

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

webmaster resources
website design

Create a Gradient Background Effect

A gradient background effect will display your selected HTML background colors in ascending or descending color variations - from lightest to darkest or darkest to lightest.

This powerful HTML code effect can be used to give your web pages a unique look and feel. However, it must be used very cautiously.

Please ensure that you select your HTML web page background colors very carefully, as your text must be clearly visible through the background colors you select.

In addition, you must select one light color and another color that is several shades lighter in order for this HTML gradient background effect to display properly.

This effect can be used for your entire web page background, or within your table cells.
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 HTML tables, place the following code within your table tag:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient effect to display properly, you must select one light color and another color that is several shades lighter.

Tip provided by:

Submit your HTML code snippets. We'll credit you and give you a link to your website.