CSS3 Gradient
CSS3 gradients (gradients) allows you to display a smooth transition between two or more specified colors.
Previously, you have to use an image to achieve these effects. However, by using CSS3 gradients (gradients), you can reduce the download events and the use of broadband. In addition, elements of transition effects look better when you zoom in, because the gradient (gradient) is generated by the browser.
CSS3 defines two types of gradients (gradients):
- Linear gradient (Linear Gradients) - Up / Down / Left / Right / diagonal direction
- Radial gradient (Radial Gradients) - defined by their center
Browser Support
Numbers in the table attribute specifies the full support of the first version of the browser.
Behind with -webkit -, - moz- or -o- specifies the required number with the prefix attribute to support the first version.
| 属性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 linear gradient
To create a linear gradient, you must define at least two colors nodes. Color node that is the color you want to show a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).
Linear gradient examples:
grammar
Linear gradient - from top to bottom (by default)
The following example demonstrates a linear gradient from the top. The starting point is red, and slowly transition to blue:
Examples
Linear gradient from top to bottom:
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); /* 标准的语法 */
}
try it"
Linear gradient - from left to right
The following example demonstrates a linear gradient from the left. The starting point is red, and slowly transition to blue:
Examples
Linear gradient from left to right:
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); /* 标准的语法 */
}
try it"
Linear gradient - diagonal
You can make a diagonal gradient by specifying horizontal and vertical starting position.
The following example demonstrates from the top left corner (bottom right) linear gradient. The starting point is red, and slowly transition to blue:
Examples
From upper left to lower right corner of a linear gradient:
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); /* 标准的语法 */
}
try it"
Use angle
If you do want more control over the direction of the gradient, you can define a point of view, rather than a predefined direction (to bottom, to top, to right, to left, to bottom right, and so on).
grammar
Angle refers to the angle between the horizontal and the gradient line, calculated counterclockwise. In other words, 0deg will create a gradient from bottom to top, 90deg creates a gradient from left to right.
However, note that many browsers (Chrome, Safari, fiefox, etc.) using the old standard, namely 0deg will create a gradient from left to right, 90deg will create a gradient from bottom to top. Conversion formula 90 - x = y where x is the standard angle, y is a non-standard angle.
The following example demonstrates how to use the linear gradient angle:
Examples
Linear gradient with a specified angle:
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); /* 标准的语法 */
}
try it"
Using multiple color nodes
The following example demonstrates how to set a plurality of color nodes:
Examples
Linear gradient from top to bottom with a plurality of color nodes:
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 标准的语法 */
}
try it"
The following example demonstrates how to create a rainbow of colors and text with a linear gradient:
Examples
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
try it"
Transparency (Transparency)
CSS3 gradients also supports transparency (transparency), it can be used to create the effect of weakening fades.
To add transparency, we use rgba () function to define the color of the node. rgba () function the last parameter is a value from 0 to 1, which defines the transparency of the color: 0 is fully transparent, 1 is fully opaque.
The following example demonstrates a linear gradient from the left. The starting point is completely transparent, and slowly transition to fully opaque red:
Examples
Linear gradient from left to right, with transparency:
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
try it"
Duplicate linear gradient
repeating-linear-gradient () function is used to repeat a linear gradient:
Examples
A duplicate linear gradient:
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
try it"
CSS3 radial gradient
Radial gradient is defined by its center.
To create a radial gradient, you must also define at least two colors nodes. Color node that is the color you want to show a smooth transition. At the same time, you can also specify the center of the gradation, shape (prototype or oval), size. By default, those at the center is Center (shown in the center), the shape of the gradation is Ellipse (represented ellipse), the size of gradient is farthest-corner (represented to the farthest corner).
Radial gradient examples:
grammar
Radial Gradient - Color nodes evenly distributed (by default)
Examples
Radial gradient color node evenly distributed:
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
try it"
Radial gradient - the color unevenly distributed nodes
Examples
Radial gradient color node unevenly distributed:
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
try it"
Setting shape
shape parameter defines the shape. It can be a value circle or ellipse. Wherein, circle representing the circle, ellipse indicates oval. The default value is ellipse.
Examples
The shape of a circular radial gradient:
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
try it"
Use keywords in different sizes
size parameter defines the size of the gradient. It can be the following four values:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Examples
Radial gradient with different sizes keywords:
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
try it"
Repeat radial gradient
repeating-radial-gradient () function is used to repeat a radial gradient:
Examples
Repeat a radial gradient:
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
try it"