The best CSS3 Gradient Tutorial In 2024, In this tutorial you can learn
Browser Support,CSS3 linear gradient,Examples,Examples,Examples,Use angle,Examples,Using multiple color nodes,Examples,Examples,Transparency (Transparency),Examples,Duplicate linear gradient,Examples,CSS3 radial gradient,Examples,Examples,Setting shape,Examples,Use keywords in different sizes,Examples,Repeat radial gradient,Examples,
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
background: linear-gradient( direction , color-stop1 ,
color-stop2, /en. );
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:
#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); /* 标准的语法 */
}
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:
#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); /* 标准的语法 */
}
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:
#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); /* 标准的语法 */
}
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
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
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:
#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); /* 标准的语法 */
}
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:
#grad {
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); /* 标准的语法 */
}
The following example demonstrates how to create a rainbow of colors and text with a linear gradient:
Examples
#grad {
/* 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);
}
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:
#grad {
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)); /* 标准的语法 */
}
Duplicate linear gradient
repeating-linear-gradient () function is used to repeat a linear gradient:
Examples
A duplicate linear gradient:
#grad {
/* 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%);
}
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
background: radial-gradient( center, shape size, start-color, /en., last-color );
Radial Gradient - Color nodes evenly distributed (by default)
Examples
Radial gradient color node evenly distributed:
#grad {
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);
/* 标准的语法 */
}
Radial gradient - the color unevenly distributed nodes
Examples
Radial gradient color node unevenly distributed:
#grad {
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%);
/* 标准的语法 */
}
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:
#grad {
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);
/* 标准的语法 */
}
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:
#grad1 {
/* 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);
}
Repeat radial gradient
repeating-radial-gradient () function is used to repeat a radial gradient:
Examples
Repeat a radial gradient:
#grad {
/* 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%);
}