CSS3 Fade __ Gradient

CSS3 defines two types of gradients (gradients)://gradients must consist of more than 2 colors for linear gradients (Linear gradients)-downward/up/left/right/diagonal radial gradients (radial gradients)-defined by their center

Linear gradient-from top to bottom (by default)

The following example shows a linear gradient that starts at the top. Starting point is red, slowly transition to blue: instance

Linear gradient from top to bottom: #grad {
Background:-webkit-linear-gradient (red, blue); * Safari 5.1-6.0 * *
Background:-o-linear-gradient (red, blue); * Opera 11.1-12.0 * *
Background:-moz-linear-gradient (red, blue); * * Firefox 3.6-15 * *
Background:linear-gradient (red, blue); /* STANDARD Syntax * *
}

Linear gradient-left to right

The following example shows a linear gradient starting from the left. Starting point is red, slowly transition to blue: instance

Linear gradient from left to right: #grad {
Background:-webkit-linear-gradient (left, red, blue); * Safari 5.1-6.0 * *
Background:-o-linear-gradient (right, red, blue); * Opera 11.1-12.0 * *
Background:-moz-linear-gradient (right, red, blue); * * Firefox 3.6-15 * *
Background:linear-gradient (to right, red, blue); /* STANDARD Syntax * *
}

Linear gradient-Diagonal

You can make a diagonal gradient by specifying a horizontal and vertical starting position.

The following example shows a linear gradient starting from the upper-left corner (to the lower-right corner). Starting point is red, slowly transition to blue: instance

Linear gradient from upper-left to lower-right corner: #grad {
Background:-webkit-linear-gradient (left Top, red, blue); * Safari 5.1-6.0 * *
Background:-o-linear-gradient (bottom right, red, blue); * Opera 11.1-12.0 * *
Background:-moz-linear-gradient (bottom right, red, blue); * * Firefox 3.6-15 * *
Background:linear-gradient (to bottom right, red, blue); /* STANDARD Syntax * *
}


Use angle

If you want to do more control in the direction of the gradient, you can define an angle instead of the predefined direction (to bottom, to top, to right, to left, to bottom right, and so on). Grammar background:linear-gradient (angle, COLOR-STOP1, COLOR-STOP2);

The angle is the angle between the horizontal and gradient lines and is calculated counterclockwise. In other words, 0deg will create a gradient from bottom to top, and 90deg will create a gradient from left to right.

However, note that many browsers (CHROME,SAFARI,FIEFOX, etc.) use the old standard, that 0deg will create a gradient from bottom to top, 90deg will create a gradient from left to right. The conversion formula 90-x = y where x is the standard angle and y is a non-standard angle.

The following example shows how to use an angle on a linear gradient: an instance

Linear gradient with the specified angle: #grad {
  background:-webkit-linear-gradient (180deg, red, blue);/* Safari 5.1-6.0/
  Background:-o-linear-gradient (180deg, red, blue); /* Opera 11.1-12.0/*
  background:-moz-linear-gradient (180deg, red, blue);/* Firefox 3.6-15/
  ; Background:linear-gradient (180deg, red, blue); /* Standard syntax * *
}

Radial gradient: background:radial-gradient (center, shape size, Start-color, ..., last-color);