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 46 1. 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  58 59 2. Gradient at an angle of 45° 60 61 62 ```css 63 /* Gradient at an angle of 45°, changing from red to green */ 64 background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0)); 65 ``` 66 67  68 69 3. Gradient from left to right 70 71 ```css 72 /* 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) */ 73 background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%); 74 ``` 75 76 77  78 79 4. 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) 30vp,rgba(0, 0, 255, .5) 60vp); 84 ``` 85 86  87
