codescracker


css

CSS3 Gradients Background



« Previous Tutorial Next Tutorial »


Gradient Background Demo

Gradient Background

CSS3 enables you to set a gradient background for an element. A gradient background is a variation of colors, which are arranged from lightest to darkest or visa-versa. It can be used as the background for an entire Web page or just within table cells or div elements. CSS3 provides you a variety of gradient options, in which linear and radial gradients are popular ones. The linear gradient shows the color combinations in lines format.

CSS3 Linear Gradients

Here is the general form to create linear gradients using CSS3:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS3 Linear Gradient (Top to Bottom)

CSS3 linear gradient flows top to bottom is the default flow. Here is an example shows how to create linear gradient (top to bottom) using CSS3:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(green, red);
    background: -o-linear-gradient(green, red);
    background: -moz-linear-gradient(green, red);
    background: linear-gradient(green, red);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

Here is the live demo output produced by the above CSS3 example:

CSS3 Linear Gradient (Left to Right)

Here is an example shows how to create linear gradient (left to right) using CSS3:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, green, red);
    background: -o-linear-gradient(right, green, red);
    background: -moz-linear-gradient(right, green, red);
    background: linear-gradient(to right, green, red);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

Here is the live demo output of the above CSS3 example:

CSS3 Linear Gradient (Diagonal)

Here is another example shows how to create linear gradient (diagonal) using CSS3:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left top, green, red);
    background: -o-linear-gradient(bottom right, green, red);
    background: -moz-linear-gradient(bottom right, green, red);
    background: linear-gradient(to bottom right, green, red);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

Here is the output produced by the above CSS3 example:

CSS3 Gradient Using Angles

Here is the general form to control gradient using angles in CSS3:

background: linear-gradient(angle, color-stop1, color-stop2);

Here, the following examples creates gradient using angles in CSS3:

<!DOCTYPE html>
<html>
<head>
<style>
#grad0 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, green, red);
    background: -o-linear-gradient(0deg, green, red);
    background: -moz-linear-gradient(0deg, green, red);
    background: linear-gradient(0deg, green, red);
}

#grad45 {
    height: 100px;
    background: -webkit-linear-gradient(45deg, green, red);
    background: -o-linear-gradient(45deg, green, red);
    background: -moz-linear-gradient(45deg, green, red);
    background: linear-gradient(45deg, green, red);
}

#grad90 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, green, red);
    background: -o-linear-gradient(90deg, green, red);
    background: -moz-linear-gradient(90deg, green, red);
    background: linear-gradient(90deg, green, red);
}
#grad135 {
    height: 100px;
    background: -webkit-linear-gradient(135deg, green, red);
    background: -o-linear-gradient(135deg, green, red);
    background: -moz-linear-gradient(135deg, green, red);
    background: linear-gradient(135deg, green, red);
}
#grad180 {
    height: 100px;
    background: -webkit-linear-gradient(180deg, green, red);
    background: -o-linear-gradient(180deg, green, red);
    background: -moz-linear-gradient(180deg, green, red);
    background: linear-gradient(180deg, green, red);
}
#grad225 {
    height: 100px;
    background: -webkit-linear-gradient(225deg, green, red);
    background: -o-linear-gradient(225deg, green, red);
    background: -moz-linear-gradient(225deg, green, red);
    background: linear-gradient(225deg, green, red);
}
#grad270 {
    height: 100px;
    background: -webkit-linear-gradient(270deg, green, red);
    background: -o-linear-gradient(270deg, green, red);
    background: -moz-linear-gradient(270deg, green, red);
    background: linear-gradient(270deg, green, red);
}
#grad315 {
    height: 100px;
    background: -webkit-linear-gradient(315deg, green, red);
    background: -o-linear-gradient(315deg, green, red);
    background: -moz-linear-gradient(315deg, green, red);
    background: linear-gradient(315deg, green, red);
}
#grad360 {
    height: 100px;
    background: -webkit-linear-gradient(360deg, green, red);
    background: -o-linear-gradient(360deg, green, red);
    background: -moz-linear-gradient(360deg, green, red);
    background: linear-gradient(360deg, green, red);
}
#grad_45 {
    height: 100px;
    background: -webkit-linear-gradient(-45deg, green, red);
    background: -o-linear-gradient(-45deg, green, red);
    background: -moz-linear-gradient(-45deg, green, red);
    background: linear-gradient(-45deg, green, red);
}

#grad_90 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, green, red);
    background: -o-linear-gradient(-90deg, green, red);
    background: -moz-linear-gradient(-90deg, green, red);
    background: linear-gradient(-90deg, green, red);
}
#grad_135 {
    height: 100px;
    background: -webkit-linear-gradient(-135deg, green, red);
    background: -o-linear-gradient(-135deg, green, red);
    background: -moz-linear-gradient(-135deg, green, red);
    background: linear-gradient(-135deg, green, red);
}
#grad_180 {
    height: 100px;
    background: -webkit-linear-gradient(-180deg, green, red);
    background: -o-linear-gradient(-180deg, green, red);
    background: -moz-linear-gradient(-180deg, green, red);
    background: linear-gradient(-180deg, green, red);
}
#grad_225 {
    height: 100px;
    background: -webkit-linear-gradient(-225deg, green, red);
    background: -o-linear-gradient(-225deg, green, red);
    background: -moz-linear-gradient(-225deg, green, red);
    background: linear-gradient(-225deg, green, red);
}
#grad_270 {
    height: 100px;
    background: -webkit-linear-gradient(-270deg, green, red);
    background: -o-linear-gradient(-270deg, green, red);
    background: -moz-linear-gradient(-270deg, green, red);
    background: linear-gradient(-270deg, green, red);
}
#grad_315 {
    height: 100px;
    background: -webkit-linear-gradient(-315deg, green, red);
    background: -o-linear-gradient(-315deg, green, red);
    background: -moz-linear-gradient(-315deg, green, red);
    background: linear-gradient(-315deg, green, red);
}
#grad_360 {
    height: 100px;
    background: -webkit-linear-gradient(-360deg, green, red);
    background: -o-linear-gradient(-360deg, green, red);
    background: -moz-linear-gradient(-360deg, green, red);
    background: linear-gradient(-360deg, green, red);
}
</style>
</head>
<body>

<div id="grad0" style="color:white;text-align:center;">0<sup>0</sup> ( 0deg )</div><br>
<div id="grad45" style="color:white;text-align:center;">45<sup>0</sup> ( 45deg )</div><br>
<div id="grad90" style="color:white;text-align:center;">90<sup>0</sup> ( 90deg )</div><br>
<div id="grad135" style="color:white;text-align:center;">135<sup>0</sup> ( 135deg )</div><br>
<div id="grad180" style="color:white;text-align:center;">180<sup>0</sup> ( 180deg )</div><br>
<div id="grad225" style="color:white;text-align:center;">225<sup>0</sup> ( 225deg )</div><br>
<div id="grad270" style="color:white;text-align:center;">270<sup>0</sup> ( 270deg )</div><br>
<div id="grad315" style="color:white;text-align:center;">315<sup>0</sup> ( 315deg )</div><br>
<div id="grad360" style="color:white;text-align:center;">360<sup>0</sup> ( 360deg )</div><br>
<div id="grad_45" style="color:white;text-align:center;">-45<sup>0</sup> ( -45deg )</div><br>
<div id="grad_90" style="color:white;text-align:center;">-90<sup>0</sup> ( -90deg )</div><br>
<div id="grad_135" style="color:white;text-align:center;">-135<sup>0</sup> ( -135deg )</div><br>
<div id="grad_180" style="color:white;text-align:center;">-180<sup>0</sup> ( -180deg )</div><br>
<div id="grad_225" style="color:white;text-align:center;">-225<sup>0</sup> ( -225deg )</div><br>
<div id="grad_270" style="color:white;text-align:center;">-270<sup>0</sup> ( -270deg )</div><br>
<div id="grad_315" style="color:white;text-align:center;">-315<sup>0</sup> ( -315deg )</div><br>
<div id="grad_360" style="color:white;text-align:center;">-360<sup>0</sup> ( -360deg )</div><br>

</body>
</html>

Here is the live demo output produced by the above CSS3 example:

00 ( 0deg )

450 ( 45deg )

900 ( 90deg )

1350 ( 135deg )

1800 ( 180deg )

2250 ( 225deg )

2700 ( 270deg )

3150 ( 315deg )

3600 ( 360deg )

-450 ( -45deg )

-900 ( -90deg )

-1350 ( -135deg )

-1800 ( -180deg )

-2250 ( -225deg )

-2700 ( -270deg )

-3150 ( -315deg )

-3600 ( -360deg )

CSS3 Gradient Using Multiple Color Stops

Let's look at the following example which shows how to create gradient using multiple color stops in CSS3:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(green, red, blue);
    background: -o-linear-gradient(green, red, blue);
    background: -moz-linear-gradient(green, red, blue);
    background: linear-gradient(green, red, blue);
}
#grad2 {
    height: 200px;
    background: -webkit-linear-gradient(green, blue, indigo,red, orange, silver, violet);
    background: -o-linear-gradient(green, blue, indigo,red, orange, silver, violet);
    background: -moz-linear-gradient(green, blue, indigo,red, orange, silver, violet);
    background: linear-gradient(green, blue, indigo,red, orange, silver, violet);
}
#grad3 {
    height: 200px;
    background: -webkit-linear-gradient(green 10%, red 85%, blue 90%);
    background: -o-linear-gradient(green 10%, red 85%, blue 90%);
    background: -moz-linear-gradient(green 10%, red 85%, blue 90%);
    background: linear-gradient(green 10%, red 85%, blue 90%);
}
</style>
</head>
<body>

<h3>3 Color Stops (Equally Spaced)</h3>
<div id="grad1"></div>

<h3>7 Color Stops (Eually Spaced)</h3>
<div id="grad2"></div>

<h3>3 Color Stops (Unequally Spaced)</h3>
<div id="grad3"></div>
</body>
</html>

Following is the sample output of the above CSS3 example:

3 Color Stops (Equally Spaced)

7 Color Stops (Eually Spaced)

3 Color Stops (Unequally Spaced)

Note - Color stops are automatically spaced evenly when no percents are specified.

CSS3 Gradient Using Transparency

Here is an example of CSS3 gradient using transparency:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

Following is the output of this CSS3 example:

CSS3 Repeating linear-gradient

Here is an example of CSS3 repeating linear-gradient:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(green, silver 10%, red 20%);
    background: -o-repeating-linear-gradient(green, silver 10%, red 20%);
    background: -moz-repeating-linear-gradient(green, silver 10%, red 20%);
    background: repeating-linear-gradient(green, silver 10%, red 20%);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

This CSS3 example will produce the following output:

CSS3 Radial Gradients

Following is the general form to create radial gradients using CSS3:

background: radial-gradient(shape size at position, start-color, ..., last-color);

CSS3 Radial Gradient (Equally Spaced Color Stops)

Here is an example of CSS3 radial gradient (equally spaced color stops):

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, black);
    background: -o-radial-gradient(red, green, black);
    background: -moz-radial-gradient(red, green, black);
    background: radial-gradient(red, green, black);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

It will display the following output:

CSS3 Radial Gradient (Unequally Spaced Color Stops)

Here is an example of CSS Radial Gradient (Unequally Spaced Color Stops):

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green  15%, black 60%);
    background: -o-radial-gradient(red 5%, green  15%, black 60%);
    background: -moz-radial-gradient(red 5%, green  15%, black 60%);
    background: radial-gradient(red 5%, green  15%, black 60%);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

This CSS3 example will display the following output:

CSS3 Repeating radial-gradient

Below is an example of CSS3 Repeating radial-gradient:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    width: 200px;
    background: -webkit-repeating-radial-gradient(black, green 10%, red 15%);
    background: -o-repeating-radial-gradient(black, green 10%, red 15%);
    background: -moz-repeating-radial-gradient(black, green 10%, red 15%);
    background: repeating-radial-gradient(black, green 10%, red 15%);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

Below is the output produced by the above CSS example:


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test