CSS Gradients

CSS Gradients （CSS渐变）

CSS gradients display progressive transitions between two or more specified colors. Gradients can be used in backgrounds. （CSS渐变显示两个或多个指定颜色之间的渐进过渡。渐变可用于背景。）

There are three types of gradients:

  • Linear Gradients （线性梯度）

  • Radial Gradients （径向梯度）

  • Conic Gradients （-圆锥渐变）

Linear Gradients

Linear Gradients （线性梯度）

The linear-gradient creates an image that consists of a smooth transition between two or more colors along a straight line. It can have a starting point and a direction along with the gradient effect. （线性渐变创建了一个图像，该图像由沿直线的两种或多种颜色之间的平滑过渡组成。它可以具有起点和方向以及渐变效果。）

Syntax

Syntax （语法）

background-image: linear-gradient(direction, color1, color2, ...);

Top to Bottom

Linear gradients transition from top to bottom, by default. （默认情况下，线性渐变从上到下过渡。）

Example of a linear gradient from top to bottom: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 300px;
       background-color: blue; 
       background-image: linear-gradient(#0052b0, #b340b3); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

We add background-color for browsers that do not support gradients. （>我们为不支持渐变的浏览器添加背景颜色。）

Left to Right

Changing a linear-gradient rotation specifying the direction starting from left transitioning to right. （更改线性渐变旋转，指定从左侧过渡到右侧的方向。）

Example of a linear gradient from left to right: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 300px;
       background-color: blue; 
       background-image: linear-gradient(to right, #0052b0 ,#b340b3); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Diagonal gradients

Gradients can be run diagonally specifying both the horizontal and vertical starting positions. It starts at the top left and goes to the bottom right. （渐变可以沿对角线运行，同时指定水平和垂直起始位置。它从左上角开始，到右下角。）

Example of the diagonal gradient: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 300px;
       background-color: blue; 
       background-image: linear-gradient(to bottom right, #0052b0, #b340b3); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Using Angles

Define an angle instead of directions to take more control over the gradient direction. 0deg creates a vertical gradient transitioning from bottom to top, 90deg creates a horizontal gradient transitioning from left to right. Specifying negative angles will run in a counterclockwise direction. （定义一个角度而不是方向，以便更好地控制梯度方向。0deg创建从底部到顶部的垂直梯度过渡， 90deg创建从左到右的水平梯度过渡。指定负角将沿逆时针方向运行。）

Example of a linear gradient with a specified angle: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 300px;
       background-color: blue; 
       background-image: linear-gradient(70deg, #0052b0, #b340b3); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Multiple Colors Effect

CSS gradient colors vary with position producing smooth color transitions. There is no limit in using colors. （CSS渐变颜色随位置而变化，产生平滑的颜色转换。使用颜色没有限制。）

Example of a linear gradient with multiple colors effect: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 300px;
       background-color: blue; 
       background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

We can also create a linear gradient with multiple colors effect specifying a direction. You can give each color zero, one, or two percentage or absolute length values. 0% indicates the starting point, while 100% indicates the ending point. （我们还可以创建具有指定方向的多色效果的线性渐变。您可以为每种颜色指定零、一个或两个百分比或绝对长度值。0%表示起点，而100%表示结束点。）

Example of a linear gradient with multiple colors from left to right: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 300px;
       background-color: blue; 
       background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Example of a linear gradient with multiple colors from right to left: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 300px;
       background-color: blue; 
       background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Transparency

Gradients support transparency, so you can use multiple backgrounds to achieve a transparent effect. To achieve it, you can use the rgba() function for defining the color stops. The last parameter in the rgba() function can be a value from 0 to 1 which will define the transparency of the color. 0 indicates full transparency, 1 indicates full color. （渐变支持透明度，因此您可以使用多个背景来实现透明效果。要实现这一点，您可以使用rgba ()函数来定义色点。rgba ()函数中的最后一个参数可以是从0到1的值，该值将定义颜色的透明度。0表示完全透明， 1表示全色。）

Example of a linear gradient from full color to transparent: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 200px;
       background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Repeating Linear Gradient

Use repeating-linear-gradient() function to repeat a linear gradient. The colors get cycled over and over again as the gradient repeats. （使用repeating-linear-gradient ()函数重复线性渐变。随着渐变的重复，颜色会反复循环。）

Example of a repeated linear gradient: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 200px;
       background-color: blue;
       background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Radial Gradients

Radial Gradients （径向梯度）

Radial gradients radiate out from a central point. For creating a radial gradient at least two color stops must be specified. Radial gradients can be circular or elliptical. （径向渐变从中心点辐射出来。要创建径向渐变，必须至少指定两个色点。径向渐变可以是圆形或椭圆形。）

Syntax

Syntax （语法）

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Example of a radial gradient with three colors: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 250px;
       width: 250px;
       background-color: blue; 
       background-image: radial-gradient( #ff0509, #fff700, #05ff33); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Positioning Radial Color Stops

Like linear gradients, radial gradients also take a specified position and absolute length. （与线性渐变一样，径向渐变也采用指定的位置和绝对长度。）

Example of differently spaced color stops: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 250px;
       width: 250px;
       background-color: blue;
       background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Positioning Center of Radial Gradient

You can also specify the center position of the gradient with percentage, or absolute lengths. （您还可以使用百分比或绝对长度指定渐变的中心位置。）

Example of a radial gradient with positioned center: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 250px;
       width: 250px;
       background-color: blue; 
       background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Radial Gradient Shape

The shape parameter defines the shape of the radial gradient. It can take two values: circle or ellipse. The default value is an ellipse.

Example of radial gradient shape: 

<!DOCTYPE html>
<html>
 <head>
   <title> Title of the document</title>
   <style>
     .gradient1 {
       height: 150px;
       width: 200px;
       background-color: blue; 
       background-image: radial-gradient(red, yellow, green);
     }
     .gradient2 {
       height: 150px;
       width: 200px;
       background-color: blue; 
       background-image: radial-gradient(circle, red, yellow, green); 
     }
   </style>
 </head>
 <body>
   <h2>Ellipse:</h2>
   <div class="gradient1"></div>
   <h2>Circle:</h2>
   <div class="gradient2"></div>
 </body>
</html>

Sizing Radial Gradient

Unlike linear gradients, the size of the radial gradients can be specified. The values are:

  • closest-corner （最近的角落）

  • closest-side （最近的侧边）

  • farthest-corner(default) （-最远角落（默认））

  • farthest-side. （最远的侧边）

Example of radial gradients with specified size: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient1 {
       height: 150px;
       width: 150px;
       background-color: blue; 
       background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601); 
     }
     .gradient2 {
       height: 150px;
       width: 150px;
       background-color: blue; 
       background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601); 
     }
     .gradient3 {
       height: 150px;
       width: 150px;
       background-color: blue;
       background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601); 
     }
     .gradient4 {
       height: 150px;
       width: 150px;
       background-color: blue; 
       background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601); 
     }
   </style>
 </head>
 <body>
   <h2>closest-side:</h2>
   <div class="gradient1"></div>
   <h2>farthest-side:</h2>
   <div class="gradient2"></div>
   <h2>closest-corner:</h2>
   <div class="gradient3"></div>
   <h2>farthest-corner:</h2>
   <div class="gradient4"></div>
 </body>
</html>

Repeating Radial Gradient

The repeating-radial-gradient() CSS function creates an image that consists of repeating gradients radiating from an origin. （Repeating-radial-gradient () CSS函数创建由从原点辐射的重复渐变组成的图像。）

Example of the repeated radial gradient: 

<!DOCTYPE html>
<html>
 <head>
   <style>
     .gradient {
       height: 200px;
       width: 200px;
       background-color: blue; 
       background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%); 
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Conic Gradients

Conic Gradients （圆锥渐变）

The conic-gradient creates an image that consists of a gradient with color transitions rotating around a center point. （二次曲线渐变创建由渐变组成的图像，颜色转换围绕中心点旋转。）

Syntax

Syntax （语法）

background-image: conic-gradient(color1, color2);

Example of a basic conic gradient: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 250px;
       width: 250px;
       background-color: blue; 
       background: conic-gradient(#ff0000, #fff200);
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Positioning Conic Center

Like radial gradients, the center of the conic gradient can be positioned with percentage, or absolute lengths, with the “at” keyword. （与径向渐变一样，可以使用“在”关键字使用百分比或绝对长度来定位二次曲线渐变的中心。）

Example of a conic gradient with positioned center: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 250px;
       width: 250px;
       background-color: blue; 
       background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Changing the Angle

The angle of the conic gradient can be rotated with the “from” keyword. （可以使用“from”关键字旋转二次曲线渐变的角度。）

Example of conic gradient with rotated angle: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 250px;
       width: 250px;
       background-color: blue; 
       background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>

Repeating Conic Gradient

The repeating-conic-gradient() CSS function creates an image that consists of a repeating gradient with color transitions rotating around a center point. （Repeating-conic-gradient () CSS函数创建一个图像，该图像由围绕中心点旋转颜色转换的重复渐变组成。）

Example of the repeated conic gradient: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     .gradient {
       height: 250px;
       width: 250px;
       background-color: blue; 
       background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
     }
   </style>
 </head>
 <body>
   <div class="gradient"></div>
 </body>
</html>
← CSS Color Names
Flexbox Guide →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部