codescracker


css

CSS3 Gradients



« Previous Tutorial Next Tutorial »


CSS3 Gradient 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.

CSS3 gradient 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 top to bottom flow is the default flow. Here is an example shows how to create linear gradient (top to bottom) using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Linear Gradient Example</title>
	<style>
		#grad1 { height:150px; 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 sample output produced by the above CSS3 linear gradient example code:

css3 linear gradient

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>
	<title>CSS3 Linear Gradient Example</title>
	<style>
		#grad1 { height:150px; 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 sample output produced by the above linear gradient (left to right) example code in CSS3:

css3 gradient

CSS3 Linear Gradient (Diagonal)

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

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Linear Gradient Example</title>
	<style>
		#grad1 { height:150px; 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 linear gradient (diagonal) example code:

css3 gradient 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>
	<title>CSS3 Gradient using Angles Example</title>
	<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 gradient using angles example code:

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 using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Gradient Example</title>
	<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 (Equally Spaced)</h3>
<div id="grad2"></div>
<h3>3 Color Stops (Unequally Spaced)</h3>
<div id="grad3"></div>

</body>
</html>

Here is the live demo output of the above CSS3 gradient using multiple color stops example code:

3 Color Stops (Equally Spaced)

7 Color Stops (Equally 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>
	<title>CSS3 Gradient Example</title>
	<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>

Here is the sample output produced by the above CSS3 gradient using transparency example code:

css3 gradient transparency

CSS3 Repeating linear-gradient

Here is an example of CSS3 repeating linear-gradient:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Repeating Linear Gradient Example</title>
	<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 repeating linear gradient example code will produce the following output:

css3 repeating linear gradient

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>
	<title>CSS3 Radial Gradient Example</title>
	<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>

The above CSS3 radial gradient (equally spaced color stops) example code will produce the output given below:

css3 radial gradient

CSS3 Radial Gradient (Unequally Spaced Color Stops)

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

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Radial Gradient Example</title>
	<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>

Below is the sample output of the above CSS3 radial gradient example code of unequally spaced color stops:

css3 radial gradient example

CSS3 Repeating Radial Gradient

Below is an example of CSS3 repeating-radial-gradient:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Repeating Radial Gradient Example</title>
	<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 CSS3 repeating radial gradient example code:

css3 repeating radial gradient

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test