Gradients

Gradients are smooth transitions between colors.

The css linear-gradient() or css radial-gradient() are functions which create image.

You can set the direction of colors, number of colors and when they start.

The linear-gradient() function creates object of linear gradient of colors. The radial-gradient() function create object of gradient of colors radiating form an origin of the gradient.

Syntax 1:

/*fallback*/
    background-color:#000;
    background-image:url('image.png');
/*standard syntax*/
    background-image: linear-gradient (direction, color-stop1 [stop-position1], color-stop2 [stop-position2], ...);

Syntax 2:

/*fallback*/
    background:#000;
 /*standard syntax*/
    background: linear-gradient (direction, color-stop1 [stop-position1], color-stop2 [stop-position2], ...);

color-stop – can be: hex, named colors, rgba, hsla etc.

stop-position – (optional) – percentage or length value when the color should start.

Linear Gradients:

In standard mode:

  • form bottom to top -> direction = to top or direction = 0deg
  • from top to bottom (default if you do not specified direction) -> direction = to bottom or direction = 180deg
  • from left to right -> direction = to right or direction = 90deg
  • form right to left -> direction = to left or direction = -90deg
  • diagonally, for example:
    • from bottom left corner to top right corner direction is equal 45deg or direction = to top right
    • from bottom right corner to top left corner direction is equal - 45deg or direction = to top left

The default value for direction is to bottom which means that gradient starts from top and goes to bottom. Equivalent degrees is 180deg.

For direction equal to 0deg gradients goes from bottom to top (direction = to top).

The negative value of degrees means the rotation to the left (counterclockwise rotation), the positive value of degrees means the rotation to the right (clockwise rotation).

Note! Values  of direction in standard syntax mode differ from those in -moz and -webkit  syntax modes.

Gradient form bottom to top

div.to-top {
    background-color:#000;
    background-image: -webkit-linear-gradient(bottom, #000, #B8FFD9); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top, #000, #B8FFD9); /* For Firefox 3.6 to 15 */
    background-image: linear-gradient(to top, #000, #B8FFD9); /* Standard syntax */
}

Gradient form top to bottom

div.to-bottom {
    background-color:#000;
    background-image: -webkit-linear-gradient(bottom, #000, #B8FFD9); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top, #000, #B8FFD9); /* For Firefox 3.6 to 15 */
    background-image: linear-gradient(to bottom, #000, #B8FFD9); /* Standard syntax */
}

Gradient form left to right

div.to-right {
    background-color:#000;
    background-image: -webkit-linear-gradient(left, #000, #B8FFD9); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(right, #000, #B8FFD9); /* For Firefox 3.6 to 15 */
    background-image: linear-gradient(to right, #000, #B8FFD9); /* Standard syntax */
}

Gradient form right to left

div.to-left {
    background-color:#000;
    background-image: -webkit-linear-gradient(right, #000, #B8FFD9); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(left, #000, #B8FFD9); /* For Firefox 3.6 to 15 */
    background-image: linear-gradient(to left, #000, #B8FFD9); /* Standard syntax */
}

Diagonal gradients

direction = 0deg
(to top)
(-moz, -webkit direction = 90deg)
direction = 45deg
(to top right)
(-moz, -webkit direction = 45deg)
direction = 90deg
(to right)
(-moz, -webkit direction = 0deg)
direction = 135deg
(to bottom right)
(-moz, -webkit direction = -45deg)
direction = 180deg
(to bottom)(default)
(-moz, -webkit direction = -90deg)
direction = -45deg
(to top left)
(-moz, -webkit direction = 135deg)
direction = -90deg
(to left)
(-moz, -webkit direction = 180deg)
direction = -135deg
(to bottom left)(-moz, -webkit direction = -135deg)
div.to-top-0deg {
    background-color:#B8F5FF;
    background-image: -webkit-linear-gradient(90deg, #B8F5FF, #EEFFB8); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(90deg, #B8F5FF, #EEFFB8); /* For Firefox 3.6 to 15 */
    background-image: linear-gradient(0deg, #B8F5FF, #EEFFB8); /* Standard syntax */
}

Gradient with three colors with stop positions.

First color is (green) after 20% starts black and then after 80% begins blue.

.linear-left-to-right-three-colors {
	background-image: -webkit-linear-gradient(left, #B8FFD9, #000 20%, #B8F5FF 80%); /*For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
	background-image: -moz-linear-gradient(right, #B8FFD9, #000 20%, #B8F5FF 80%); /* For Firefox 3.6 to 15 */
	background-image: linear-gradient(to right, #B8FFD9, #000 20%, #B8F5FF 80%); /* Standard syntax */
}