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 5This framework supports two gradient styles: linear gradient and repeating linear gradient. 6 7## Linear Gradient/Repeating Linear Gradient 8 9To use the gradient style, you need to specify the transition direction and transition color. 10 11### Transition Direction 12 13The available values are as follows: 14 15- **direction**: gradient by direction 16- **angle**: gradient by angle 17 18``` 19background: linear-gradient(direction/angle, color, color, ...); 20background: repeating-linear-gradient(direction/angle, color, color, ...); 21``` 22 23### Transition Color 24 25The following four colors are supported: #ff0000, #ffff0000, rgb (255, 0, 0) and rgba (255, 0, 0, 1). At least two colors must be specified. 26 27- Name 28 29 30 31 | Name | Type | Default Value | Mandatory | Description | 32 | --------- | ------------------------------------------------------------ | --------------------------------------- | --------- | ------------------------------------------------------------ | 33 | 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 right** (gradient from left to right) or **to bottom right** (from the top left to the bottom right). | 34 | angle | <deg> | 180deg | No | Transition direction. 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. | 35 | color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. | 36 37- Example 38 39 1. Gradient from top to bottom (default) 40 41 ``` 42 #gradient { 43 height: 300px; 44 width: 600px; 45 /* Gradient starts from red at the top to green at the bottom. */ 46 background: linear-gradient(red, #00ff00); 47 } 48 ``` 49 50  51 52 1. Gradient at an angle of 45° 53 54 ``` 55 /* Gradient at an angle of 45°, changing from red to green */ 56 background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); 57 ``` 58 59  60 61 1. Gradient from left to right 62 63 ``` 64 /* 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) */ 65 background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); 66 ``` 67 68  69 70 1. Repeating gradient 71 72 ``` 73 /* Repeating gradient from left to right, the area of which is 30 px (60-30) and the opacity is 0.5 */ 74 background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); 75 ``` 76 77 
