There are two types of css3 gradients: 1. The linear gradient created by the linear-gradient() function, which changes the color along an axis and performs a sequential gradient from the starting point to the end color; 2. The radial-gradient() function Create a radial gradient that makes a circular gradient from the start point to the end point color from the inside out.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Two gradient methods:
#Linear Gradients: Change the color along an axis, from the starting point to the end color Sequential gradient.
background:linear-gradient(direction,color-stop1,color-stop2,……);
Radial Gradient: From the starting point to the end point, the color performs a circular gradient from the inside to the outside.
background:radial-gradient(center,shape size,start-color,……,last-color);
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grad1
{
width: 200px;
height: 200px;
/*background-image: linear-gradient( #b7ffb5, #a880ff);*/
/*background-image: linear-gradient(to right, #b7ffb5, #a880ff);*/
/*background-image: linear-gradient(to bottom right, #b7ffb5, #a880ff);*/
background-image: radial-gradient(#7af0ff, #892aff);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>Effect picture:
1. Up and down linear gradient
2. Left and right linear gradient
3. Diagonal linear gradient
4. Radial gradient
(Learning video sharing: css video tutorial, web front-end)
The above is the detailed content of How many types of css3 gradients are there?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
