How To Display a Gradient Background
A gradient background effect will display your selected background colors in ascending or descending color variations – from lightest to darkest or darkest to lightest.
This powerful code effect can be used to give your web pages a unique look and feel. However, please ensure that you select your background colors very carefully, as your text must be clearly visible through the colors you select.
In addition, you must select one light color and another color that is several shades lighter in order for this gradient background effect to display properly.
Linear Gradient Effect
To use the gradient effect within your web page, your first step will be to place the following code between the HEAD tags of your web page:
<style>
<!–
#gradient
{
height:200px;
width:400px;
background: -webkit-linear-gradient(#C0CFE2, #FFFFFF); /* Safari 5.1 – 6.0 */
background: -o-linear-gradient(#C0CFE2, #FFFFFF); /* Opera 11.1 – 12.0 */
background: -moz-linear-gradient(#C0CFE2, #FFFFFF); /* Firefox 3.6 – 15 */
background: linear-gradient(#C0CFE2, #FFFFFF); /* Standard */
}
//–>
</style>
The above code will display a linear gradient that starts with blue at the top and ends at the bottom with white. Edit the text indicated in bold to suit your needs.
To display the gradient effect, your final step will be to place the following code within your web page where you’d like the effect to display:
<div id=”gradient“></div>
Note: The id can be called whatever you’d like. However, it must be the same as the name as the #gradient code between your HEAD tags.
You can also display this gradient with three or more colors:
Place the following code between the HEAD tags of your web page:
#gradient2
{
height:200px;
width:400px;
background: -webkit-linear-gradient(red, blue, violet); /* Safari 5.1 – 6.0 */
background: -o-linear-gradient(red, blue, violet); /* Opera 11.1 – 12.0 */
background: -moz-linear-gradient(red, blue, violet); /* Firefox 3.6 – 15 */
background: linear-gradient(red, blue, violet); /* Standard */
}
The above code will display a linear gradient that starts with red at the top, fades into blue and ends at the bottom with violet. Edit the text indicated in bold to suit your needs.
Your final step will be to place the following code within your web page where you’d like the effect to display:
<div id=”gradient2“></div>
Note: The id can be called whatever you’d like. However, it must be the same as the name as the #gradient2 code between your HEAD tags.
For additional information on HTML codes, visit the HTML Tutorial section.
This concludes the gradient background code.
Visit the following pages for a wealth of copy and paste codes and tips:
HTML Tips
Copy and paste special effect HTML codes for your web page.
HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.
HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.
JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.
Web Design Tips
Tips, tricks, and special effect codes for your web page.
HTML Tags
A list of HTML tags.
HTML 5 Tags
A list of the latest HTML tags to be developed.
ASCII Codes
Special text characters and code for your web page.