Gradients

What are Gradients? Gradients are graphics files that gradually blend from one shade of color to another. By using gradients as background images, we can make our web pages look more modern and stylish. There is no need to use a large image when building a gradient effect on our page. We take advantage of the background-repeat property in CSS.

How Gradients Work: By repeating the graphic horizontally, we can fill a much larger area with the gradient effect. 200 pixels high 10 pixels wide To make web pages load faster, most web designers make their gradients just 1 pixel wide.

Gradient Example:.header { width:800px; height:200px; background-image:url('gradient.jpg'); background-repeat:repeat-x; } h1 { text-align:center; color:white; } Gradient Example Gradient Example We can use horizontal gradients to style our pages also. Many XHTML elements can use gradients as their background images:,,,,, etc.

Creating Gradients: Gradient files are created using graphics applications such as Adobe Photoshop. They can also be created at no cost by using online resources, such as tools.dynamicdrive.com/gradient/ : Choose which type of gradient. Choose dimensions of gradient. Set the start and end colors. Choose a file format. See a preview of the gradient.