• Tweet

We can create gradients in CSS3 without using any image. The gradients are supported by Mozilla(Firefox) and Webkit(Safari, Chrome etc) based browsers. Unfortunately Internet explorer does not support gradient feature yet. In this tutorial, I will explain how we can use linear gradients in the webkit and mozilla based browsers.

For Webkit( Safari, Chrome etc.) Browsers:

Syntax:

-webkit-gradient(<type>, <starting point>, <ending point>,
 <from color>, <to color> [, < to colour>]);

Type: The type of gradient, which can either be linear or radial.
Point: Each point is a pair of values, for example right center etc. The points can be defined in percentage as well.
Colors: Each color has following syntax: <color-stop> (value, color). The value can be either percentage (0 to 100%) or length (from 0 to 1).

The example use of -webkit-gradient is as following:

background: -webkit-gradient(linear, center top, center bottom,
color-stop(0%, #FFFFA6),color-stop(50%, #BDF271),
color-stop(100%, #01A2A6));

We can specify as many color-stops we want to. The simplified form of the above syntax is a start color and stop color which refers to color-stop(0, color) and color-stop(1, color) respectively, for example:

background: -webkit-gradient(linear, left top, left bottom,
 from(#4BA5CC), to(#16325C));

For Mozilla Browsers:

Syntax:

-moz-linear-gradient([<position>] [<angle>],
<starting color>, <to colour> [, <to colour>]);

Position: The position is used to define the starting point of the gradient. The value can be defined in pixels, or percentage or by position (left, center, right, top, bottom). If a position is not specified, the default value is used, which is center, or 50%.
Angle: We can define starting point of gradient by angle as well. For example, we can get vertical gradient with value of 90deg.
Color: Each color has following syntax: <color> (value). The value can be either percentage (0 to 100%) or length (from 0 to 1). If a color value is specified, the previous color will fade to that specified stop color at that stop point. If no value is specified, the color will fade out gradually from the start color to the end color.
The example use of -moz-linear-gradient:

background: -moz-linear-gradient(top , #FFFFA6 0%,
#BDF271 50%, #01A2A6 100%);

or the simple use can be

background: -moz-linear-gradient(top,  #FFF71A,  #9CFF2C);

Examples of Linear Gradients:

Simple linear gradient using two color stops

background: -webkit-gradient(linear, left top, left bottom,
from(#408AD4), to(#00264C));
background: -moz-linear-gradient(top,  #408AD4,  #00264C);
background:#408AD4;

The output of the above code will be

Linear Gradient using three color stops

background: -webkit-gradient(linear, center top, center bottom,
color-stop(0%, #FFFFA6), color-stop(50%, #BDF271),
color-stop(100%, #01A2A6));
background: -moz-linear-gradient(top, #FFFFA6 0%, #BDF271 50%,
#01A2A6 100%);
background: #01A2A6;

Output:

Linear Gradient using degrees

background: -webkit-gradient(linear, left bottom, right top,
color-stop(0%, #FFF71A), color-stop(50%, #9CFF2C),
color-stop(100%, #043100));
background: -moz-linear-gradient(left bottom 45deg,
#FFF71A 0%, #9CFF2C 50%, #043100 100%);
background: #043100;

output:

Another example of gradient using angle

background: -webkit-gradient(linear, right center,
left center, color-stop(0%, #648C02), color-stop(50%, #FFD300),
color-stop(100%, #FF7000));
background: -moz-linear-gradient(right top 180deg, #648C02 0%,
#FFD300 50%, #FF7000 100%);
background: #648C02;

Output:

I hope this tutorial was helpful. If you have any questions or suggestions, please leave a comment. Thanks =)