Color gradient in CSS3

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:

.linear_color_gradient { background-image: -webkit-gradient(linear, left top, left bottom, from(#D2FFFF), to(#00CCCC)); background-image: -moz-linear-gradient(top, #D2FFFF, #00CCCC); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D2FFFF, endColorstr=#00CCCC); }

Syntax explanation: The first line of the syntax is for Webkit browsers (Google chrome and Safari), explanation for the same is provided belowThe 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:

.radial_color_ gradient { background-image: -moz-radial-gradient(top left,#D2FFFF , #00CCCC) ; background: -webkit-gradient(radial, 5% 5%, 20, 5% 5%, 100,from(#D2FFFF),to(#00CCCC)); }

Syntax explanation: The first line of the syntax refers to Mozilla browsers, which accepts 4 attributes.

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)
The output obtained for linear and radial color gradients are shown below.

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