1# Gradient Styles
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7Gradient 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.
8
9
10This framework supports two gradient styles: linear gradient and repeating linear gradient.
11
12
13## Linear Gradient/Repeating Linear Gradient
14
15To use the gradient style, you need to specify the transition direction and transition color.
16
17
18### Transition Direction
19
20The available values are as follows:
21- **direction**: gradient by direction.
22
23- **angle**: gradient by angle.
24
25```
26background: linear-gradient(direction/angle, color, color, ...);
27background: repeating-linear-gradient(direction/angle, color, color, ...);
28```
29
30
31### Transition Color
32
33The 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.
34
35**Parameters**
36
37| Style       | Type                                      | Default Value                         | Mandatory  | Description                                      |
38| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
39| direction | to &lt;side-or-corner&gt;  &lt;side-or-corner&gt; = [left \| right] \| [top \| bottom] | to bottom (gradient from top to bottom)| No   | Transition direction, for example, **to left** (gradient from right to left) or<br>**to bottom right** (gradient from the top left to the bottom right).|
40| angle     | &lt;deg&gt;                              | 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.|
41| color     | &lt;color&gt; [&lt;length&gt;\|&lt;percentage&gt;] | -                            | Yes   | Colors among which smooth transitions are rendered.                     |
42
43**Example**
441. Gradient from top to bottom (default)
45
46   ```css
47   #gradient {
48     height: 300px;
49     width: 600px;
50     /* Gradient starts from red at the top to green at the bottom. */
51     background: linear-gradient(red, #00ff00);
52   }
53   ```
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
67
68![222](figures/222.png)
69
703. Gradient from left to right
71
72   ```css
73   /* 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) */
74   background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
75   ```
76
77![333](figures/333.png)
78
794. Repeating gradient
80
81   ```css
82   /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */
83   background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
84   ```
85
86![444](figures/444.png)
87