How to set gradient color in css

Method: 1. Use linear-gradient to set a linear gradient, the syntax "linear-gradient (angle, color, color)"; 2. Use radial-gradient to set a radial gradient, the syntax "radial-gradient (position) ,color,color)”.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS3 gradients allow you to display smooth transitions between two or more specified colors.

CSS3 defines two types of gradients:

• Linear Gradients - Down/Up/Left/Right/Diagonally Directions

• Radial Gradients - defined by their centers

In order to create a linear gradient, you must define at least two Color nodes. Color nodes are the colors you want to show a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

css setting linear gradient example:

      
  
线性渐变 - 从上到下
 
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
 
 
注意： Internet Explorer 9 及之前的版本不支持渐变。
  

Rendering:

Recommended learning:css video tutorial

The above is the detailed content of How to set gradient color in css. For more information, please follow other related articles on the PHP Chinese website!