gradient

Gradient specifies a range of position-dependent colors, usually used to fill a region. The colors produced by a gradient vary continuously with position, producing smooth color transitions.

Just as you can declare the background of an element to be a solid color in CSS3, you can also declare that background to be a gradient. Gradients are typically one color that fades into another, but in CSS3 you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage so that it is better for control and performance. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

Perhaps the most common and useful type of gradient is a linear gradient. The gradients “axis” can go from top-to-bottom (this is a default), left-to-right, or at any angle you chose. To create a linear gradient, you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

For example:

			#grad1 {background: linear-gradient(red, blue);}
			
			#grad2 {background: linear-gradient(red, yellow, green);}
		

A radial gradient is defined by its center thus it differs from linear gradient in that it starts at a single point and emanate outwards. Radial gradients are often used to simulate a lighting, which is not always straight, so they can be useful to make a gradient seem even more natural. The default is for the first color to start in the (center center) of the element and fade to the end color toward the edge of the element. The fade happens at an equal rate no matter which direction. To create a radial gradient you must also define at least two color stops. By default, shape is ellipse, size is farthest-corner, and position is center.

For example:

			#grad1 {background: radial-gradient(red, blue);}
			
			#grad2 {background: radial-gradient(red, yellow, green);}