#grad-back { height: 55px; background: -webkit-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Fx 3.6 to 15 */ background: linear-gradient(to right, red, orange, yellow, green, cyan, yellow, red); /* Standard syntax (must be last) */ }

CSS Gradient


Prev Tutorial Next Tutorial

CSS Gradient

CSS Gradient is used is used to display smooth transition (changes) within two or more specified colors.

Advantage of CSS Gradient

Earlier, you had to use images for these types of changes, but when you use CSS Gradient in place of images you get following advantage;

  • Reduce download time.
  • Reduce bandwidth usage.
  • In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
  • No need to use image for transition effects.

Types of gradient in CSS3.

There are two types of gradient in CSS3, which is given below;

  • Linear gradients
  • Radial gradients

Linear gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

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

Linear Gradient - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to green;

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad-top-bottom {
    height: 200px;
    background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad-top-bottom"></div>

</body>
</html>

Result

Linear Gradient - Left to Right

The following example shows a linear gradient that starts from the left. It starts red, transitioning to green;

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad-left-right {
    height: 200px;
    background: -webkit-linear-gradient(left, red, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad-left-right"></div>

</body>
</html>

Result

Linear Gradient - Diagonal

You can also make a gradient diagonally by specifying both the horizontal and vertical starting positions. The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to green;

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad-diagonal {
    height: 200px;
    background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad-diagonal"></div>

</body>
</html>

Result

Linear Gradient - Angle

You can also make a gradient by specifying angle;

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad-angle {
    height: 200px;
    background: -webkit-linear-gradient(180deg, red, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, red, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg, red, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg, red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad-angle"></div>

</body>
</html>

Result

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad-back {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, red, orange, yellow, green, cyan, yellow, red); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad-back" style="text-align:center;margin:auto;color:#fff;font-size:40px;font-weight:bold">
Gradient Background
</div>

</body>
</html>

Result

Gradient Background

Radial gradients

A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, yellow, cyan); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(red, yellow, cyan); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(red, yellow, cyan); /* For Fx 3.6 to 15 */
    background: radial-gradient(red, yellow, cyan); /* Standard syntax (must be last) */
}

</style>
</head>
<body>

<div id="grad"></div>

</body>
</html>

Result

Browser supported

Property
linear-gradient26.0 10.0-webkit-16.0 3.6-moz-10.012.1 11.1-o-6.1 5.1-webkit-
radial-gradient26.0 10.0-webkit-16.0 3.6-moz-10.012.1 11.1-o-6.1 5.1-webkit-
repeating-linear-gradient26.0 10.0-webkit-16.0 3.6-moz-10.012.1 11.1-o-6.1 5.1-webkit-
repeating-radial-gradient26.0 10.0-webkit-16.0 3.6-moz-10.012.1 11.1-o-6.1 5.1-webkit-

Prev Tutorial Next Tutorial

Google Advertisements
Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements