1# Gradient Styles
2
3Gradient styles are commonly supported and can be set in the **style** attribute or a **.css** file. Gradients enable smooth transition between two or more specified colors.
4
5> **NOTE**
6>
7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9The development framework supports two gradient styles: linear gradient and repeating linear gradient.
10
11
12## Linear Gradient/Repeating Linear Gradient
13
14To use the gradient style, you must specify the transition direction and transition color.
15
16
17### Transition Direction
18
19  You can specify the transition direction through **direction** or **angle**.
20
21- **direction**: gradient by direction.
22
23- **angle**: gradient by angle.
24
25
26```css
27background: linear-gradient(direction/angle, color, color, ...);
28background: repeating-linear-gradient(direction/angle, color, color, ...);
29```
30
31
32### Transition Color
33
34The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb(255, 0, 0), and rgba(255, 0, 0, 1). At least two colors must be specified.
35
36**Parameters**
37
38| Name       | Type                                      | Default Value                         | Mandatory  | Description                                      |
39| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
40| direction | to <side-or-corner>  <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No   | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
41| angle     | <deg>                              | 180deg                       | No   | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
42| color     | <color> [<length>\|<percentage>] | -                            | Yes   | Colors among which smooth transitions are rendered.                     |
43
44**Example**
45
461. Gradient from top to bottom (default)
47
48   ```css
49   #gradient {
50     height: 300px;
51     width: 600px;
52     /* Gradient starts from red at the top to green at the bottom. */
53     background: linear-gradient(red, #00ff00);
54   }
55   ```
56
57   ![111](figures/111.PNG)
58
592. Gradient at an angle of 45°
60
61   ```css
62   /* Gradient at an angle of 45°, changing from red to green */
63     background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
64   ```
65
66      ![222](figures/222.PNG)
67
683. Gradient from left to right
69
70   ```css
71   /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
72   background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
73   ```
74
75    ![333](figures/333.PNG)
76
774. Repeating gradient
78
79   ```css
80     /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */
81     background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
82   ```
83
84   ![444](figures/444.PNG)
85