Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

CSS 3

Learn step by step



CSS3 Gradients

CSS gradients are new types of <image> added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors. This lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.

Linear Gradient - Top to Bottom

<!DOCTYPE html>
<html><head>
<style>
#grad1
{height:200px;
background: -webkit-linear-gradient(green, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, red)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, red)); /* For Firefox 3.6 to 15 */
background: linear-gradient(green, red); /* Standard syntax (must be last) */}
</style>
</head>
<body>
<b>Linear Gradient - Top to Bottom</b>
<div id="grad1"></div>
</body></html>

Output

Linear Gradient - Top to Bottom
Linear Gradient - Left to Right

<!DOCTYPE html>
<html><head>
<style>
#grad2
{height:200px;
background: -webkit-linear-gradient(left,#33EBFC, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left,#33EBFC, red)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left,#33EBFC, red)); /* For Firefox 3.6 to 15 */
background: linear-gradient(left,#33EBFC, red); /* Standard syntax (must be last) */}
</style>
</head>
<body>
<b>Linear Gradient - Top to Bottom</b>
<div id="grad2"></div>
</body></html>

Output

Linear Gradient - Left to Right
Using Angles

The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words, 0deg creates a vertical gradient from the bottom to the top, while 90deg generates a left to right horizontal gradient :


background: linear-gradient(to bottom, blue, white 80%, orange);

Output

Linear Gradients - Using Different Angles
Using Color Stops

Color stops are 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 like in order to achieve the desired effect.

If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.


background: linear-gradient(to bottom, blue, white 80%, orange);
background: linear-gradient(to right, red, orange, yellow, green, blue);

Output

Linear Gradients - Using Color Stops
Transparency and gradients

Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images.


background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://orianaitsolutions.com/image.jpg);

Output

Transparency and gradients
CSS3 Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops. You can also specify the gradient's center, shape (circle or ellipse) as well as its size. By default, center is center, shape is ellipse, and size is farthest-corner.


background: radial-gradient(blue, pink, red);

Output

Radial Gradient - Evenly Spaced Color Stops


Related Videos