The background of a website plays an important role to enhance its appearance. CSS3 has the ability to create color gradients which can be applied advantageously, for an appealing web page.

Linear gradient

The syntax for linear gradient background style is given below for the Web-kit, Mozilla (3.6 and higher versions) and IE browsers:

Syntax explanation:

The first line of the syntax is for Webkit browsers (Google chrome and Safari), explanation for the same is provided below-

The web-kit gradient method accepts 5 attributes as listed below.

1. Gradient type ('linear' or 'radial')
2. Gradient starting point (left top)
3. Gradient ending point (left bottom)
4. Starting color of gradient( #D2FFFF)
5. Ending color of gradient (#00CCCC)

Starting and end points for different gradients in web-kit gradient method are listed below:

• For vertical linear gradient: top left, bottom left
• For horizontal linear gradient: top left, top right
• For diagonal linear gradient : top left, bottom right

Second line of the syntax refers to Mozilla browsers, which accepts 4 attributes.
Explanation for the same is provided below -  

1. Gradient type ('linear' or 'radial')
2. Gradient starting point (top)
3. Starting color (#D2FFFF)
4. Ending color (#00CCCC)

Contrary to webkit-gradient method, in Mozilla, for vertical and horizontal gradients, only single reference is enough.

• For vertical linear gradient : top
• For horizontal linear gradient : left
• For diagonal linear gradient: left top

In addition to the above three, in Mozilla we can also specify the angle at which we want the gradient.

To skew the gradient at an angle of 60 degree: top 60deg.

The third line of the syntax refers to IE browsers:

For IE browsers we will not use "background," but rather "filter" to specify the background gradient. The style accepts 2 attributes:

1. startColorstr : Starting color of the gradient
2. endColorstr: Ending color of the gradient.

Radial gradient

The radial gradient background can be applied to web pages using the following code:

1. Type of gradient (radial)
2. Starting point of the radial gradient (top left)
3. Centre color (#D2FFFF)
4. Outer color (#00CCCC)

The second line of syntax refers to the webkit browsers (Google Chrome / Safari), which accepts 7 attributes :

1. Type of gradient (radial)
2. Moves the gradient on the x-axis and y-axis respectively (7% 5%)
3. Extent of center color fading (20). This particular variable does not make any difference to the output.
4. Similar to (2), moves the gradient on x and y axis (7% 5%)
   Note: For 'radial' gradient background effect, values assigned to second and fourth attributes should be same.
   You can play around to provide different gradient effects by assigning different values to 2nd / 4th attributes.
5. Extent of spread of centre color (100), by default it accepts pixel value, you can also try and give percentage.
6. Centre color ( #D2FFFF)
7. Outer  color ( #00CCCC)

Limitations: The radial gradient effect doesn't reflect in IE browsers, tested upto version 8, but works perfectly well with a reliable web hosting.

Tags: CSS3 for background gradient, linear gradient in CSS3, radial gradient in CSS3, styles for gradient fill