CSS gradients are new types of image added in the CSS3 Image Module.
CSS gradients lets you display smooth transitions between two or more specified colors.
Browsers support two types of gradients:
linear-gradient() function, radial-gradient() function.To create a linear gradient, we set a starting point and a direction as an angle.
We also define color stops. Color stops are the colors to render smooth transitions. We must specify at least two stop colors.
Here's a linear gradient that starts at the center (horizontally) and top (vertically), and starts blue, transitioning to white.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!--from w ww . j a v a 2 s.co m-->
width: 100px;
height: 100px;
border: 1px solid rgb(51, 51, 51);
background: -moz-linear-gradient(top, red, white);
background: -moz-linear-gradient(to bottom, red, white);
background: -ms-linear-gradient(top, red, white);
background: -o-linear-gradient(top, red, white);
background: -webkit-linear-gradient(top, red, white);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows:
Changing the same gradient to run from left to right:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- w w w. ja v a 2s. co m-->
width: 100px;
height: 100px;
border: 1px solid rgb(51, 51, 51);
background: -moz-linear-gradient(left, red, white);
background: -moz-linear-gradient(to right, red, white);
background: -ms-linear-gradient(left, red, white);
background: -o-linear-gradient(left, red, white);
background: -webkit-linear-gradient(left, red, white);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows:
To make the gradient run diagonally, specify both the horizontal and vertical starting positions. For example:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!--from w w w .j a va 2s . c om-->
width: 100px;
height: 100px;
border: 1px solid rgb(51, 51, 51);
background: -moz-linear-gradient(left top, red, white);
background: -moz-linear-gradient(to bottom right, red, white);
background: -ms-linear-gradient(left top, red, white);
background: -o-linear-gradient(left top, red, white);
background: -webkit-linear-gradient(left top, red, white);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows:
Without an angle, the browser will determine the value automatically based on the given direction.
We can set the angle specifically to control over the direction of the gradient. The following code shows how to set the angle.
background: linear-gradient(70deg, black, white);
For example, here are two gradients, the first one with a direction of towards the right, and the second one has an angle of 70 degrees.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- w w w. j a va 2 s .co m-->
width: 100px;
height: 100px;
border: 1px solid rgb(51, 51, 51);
background: linear-gradient(70deg, black, white);
}
#grad2 {
width: 100px;
height: 100px;
border: 1px solid rgb(51, 51, 51);
background: linear-gradient(black, white);
}
</style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
</body>
</html>
The code above is rendered as follows:
The following code compares the results of different angles.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!--from w w w . j a v a2s.c om-->
height: 100px;
background: -webkit-linear-gradient(0deg, red, white);
background: -o-linear-gradient(0deg, red, white);
background: -moz-linear-gradient(0deg, red, white);
background: linear-gradient(0deg, red, white);
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, red, white);
background: -o-linear-gradient(90deg, red, white);
background: -moz-linear-gradient(90deg, red, white);
background: linear-gradient(90deg, red, white);
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, white);
background: -o-linear-gradient(180deg, red, white);
background: -moz-linear-gradient(180deg, red, white);
background: linear-gradient(180deg, red, white);
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, white);
background: -o-linear-gradient(-90deg, red, white);
background: -moz-linear-gradient(-90deg, red, white);
background: linear-gradient(-90deg, red, white);
}
</style>
</head>
<body>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
</body>
</html>
The code above is rendered as follows:
Color stops define points along the gradient line that will have a specific color at that location.
The location can be specified as either a percentage of the length of the line, or as an absolute length.
You may specify as many color stops as you.
To specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point.
To create the effect we can use values outside that range if necessary.
This example specifies three color stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- w ww . j av a 2 s. com-->
width: 100px;
height: 100px;
border: 1px solid rgb(51, 51, 51);
background: -moz-linear-gradient(center top , blue, white 60%, red);
background: -moz-linear-gradient(to bottom, blue, white 60%, red);
background: -ms-linear-gradient(center top , blue, white 60%, red);
background: -o-linear-gradient(center top , blue, white 60%, red);
background: -webkit-linear-gradient(top , blue, white 60%, red);
background: linear-gradient(to bottom, blue, white 60%, red);
}
</style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
</body>
</html>
The code above is rendered as follows:
Here's an example using a wide variety of colors, all evenly spaced:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- w ww. j a v a 2 s. c om-->
width: 100px;
height: 100px;
border: 1px solid rgb(51, 51, 51);
background: -moz-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;
background: -moz-linear-gradient(to right, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;
background: -ms-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;
background: -o-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue) repeat scroll 0% 0% transparent;
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows:
CSS Gradients support transparency.
To add transparency, we use the rgba() function to define the color stops.
The last parameter in rgba() function can be a value from 0 to 1.
It defines the transparency of the color: 0 indicates full transparency,
1 indicates full color (no transparency).
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!--from ww w . j a v a 2 s. co m-->
height: 200px;
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows:
Radial gradients are specified using the radial-gradient() functional.
Its syntax is similar to linear gradients, except you can specify the gradient's ending shape, a circle or ellipse, as well as its size.
By default, the ending shape is an ellipse with the same proportions than the container's box.
The following code shows a radial Gradient with evenly spaced color stops.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- w w w . j a v a2 s .co m-->
height: 200px;
width: 200px;
background: -webkit-radial-gradient(red, green, yellow);
background: -o-radial-gradient(red, green, yellow);
background: -moz-radial-gradient(red, green, yellow);
background: radial-gradient(red, green, yellow);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows:
The following code shows how to create a radial gradient with differently spaced color stops.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!--from w w w. j a v a 2 s .c om-->
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red 5%, green 15%, yellow 60%);
background: -o-radial-gradient(red 5%, green 15%, yellow 60%);
background: -moz-radial-gradient(red 5%, green 15%, yellow 60%);
background: radial-gradient(red 5%, green 15%, yellow 60%);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows:
The shape parameter defines the shape for Radial gradients.
It can take the value circle or ellipse.
The default value is ellipse.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- w w w .j a va 2 s . c o m-->
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, yellow, green);
background: -o-radial-gradient(red, yellow, green);
background: -moz-radial-gradient(red, yellow, green);
background: radial-gradient(red, yellow, green);
}
#grad2 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(circle, red, yellow, green);
background: -o-radial-gradient(circle, red, yellow, green);
background: -moz-radial-gradient(circle, red, yellow, green);
background: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<p>Ellipse (this is default):</p>
<div id="grad1"></div>
<p>Circle:</p>
<div id="grad2"></div>
</body>
</html>
The code above is rendered as follows:
We can use the size parameter to define the size of the radial gradient.
The size for radial gradient can take take four values:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- w w w.j av a2 s . c o m-->
height: 150px;
width: 150px;
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,red);
}
#grad2 {
height: 150px;
width: 150px;
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,red);
}
#grad3 {
height: 150px;
width: 150px;
background: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,red);
}
#grad4 {
height: 150px;
width: 150px;
background: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,red);
}
</style>
</head>
<body>
<p><strong>closest-side:</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side:</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner:</strong></p>
<div id="grad3"></div>
<p><strong>farthest-corner (this is default):</strong></p>
<div id="grad4"></div>
</body>
</html>
The code above is rendered as follows:
The linear-gradient() and
radial-gradient() don't repeat the color stops.
The repeating-linear-gradient() and
repeating-radial-gradient() can
repeat the gradients.
This example uses repeating-linear-gradient() to create a gradient:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!--from w w w .ja v a2 s .co m-->
height: 150px;
width: 200px;
background: repeating-linear-gradient(-45deg, yellow, yellow 5px, white 5px, white 10px);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows:
This example uses repeating-radial-gradient() to create a gradient:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- ww w . jav a2s . c o m-->
height: 150px;
width: 200px;
background: repeating-radial-gradient(red, red 5px, white 5px, white 10px);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
The code above is rendered as follows: