1# Gradient Color
2
3Create a more gorgeous look for a component by applying a gradient color effect to it.
4
5>  **NOTE**
6>
7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## linearGradient
10
11linearGradient(value: {angle?: number | string; direction?: GradientDirection; colors: Array\<[ResourceColor, number]>; repeating?: boolean;})
12
13Linear gradient.
14
15**Widget capability**: This API can be used in ArkTS widgets since API version 9.
16
17**Atomic service API**: This API can be used in atomic services since API version 11.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name| Type                                                        | Mandatory| Description                                                        |
24| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
25| value  | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[[ResourceColor](ts-types.md#resourcecolor), number]&gt;,<br>repeating?: boolean<br>} | Yes  | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br>  Default value: **180**<br>If **angle** is a string, only the deg, grad, rad, and turn types are supported.<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br>  Default value: **GradientDirection.Bottom**<br>- **colors**: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**|
26
27## sweepGradient
28
29sweepGradient(value: {center: [Length, Length]; start?: number | string; end?: number | string; rotation?: number | string; colors: Array\<[ResourceColor, number]>; repeating?: boolean;})
30
31Sweep gradient.
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Widget capability**: This API can be used in ArkTS widgets since API version 9.
38
39**Parameters**
40
41| Name| Type                                                        | Mandatory| Description                                                        |
42| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
43| value  | {<br>center: [[Length](./ts-types.md#length), Length],<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number \| string,<br>colors: Array&lt;[[ResourceColor](ts-types.md#resourcecolor), number]&gt;,<br>repeating?: boolean<br>} | Yes  | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.<br>- **center**: center of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start angle of the sweep gradient.<br> Default value: **0**<br>If the angle is specified with a string, only the deg, grad, rad, and turn types are supported.<br>- **end**: end angle of the sweep gradient.<br> Default value: **0**<br>If the angle is specified with a string, only the deg, grad, rad, and turn types are supported.<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>If the angle is specified with a string, only the deg, grad, rad, and turn types are supported.<br>- **colors**: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 360 is handled as the value **1**.<br>When **start**, **end**, or **rotation** is specified with a string, the string must be a number or a number followed by one of the following units: deg, rad, grad, and turn. Valid value examples are "90", "90deg", and "1.57rad".|
44
45## radialGradient
46
47radialGradient(value: { center: [Length, Length]; radius: number | string; colors: Array\<[ResourceColor, number]>; repeating?: boolean })
48
49Radial gradient.
50
51**Atomic service API**: This API can be used in atomic services since API version 11.
52
53**System capability**: SystemCapability.ArkUI.ArkUI.Full
54
55**Widget capability**: This API can be used in ArkTS widgets since API version 9.
56
57**Parameters**
58
59
60| Name    | Type                                        | Mandatory                            | Description                              |
61| -------------- | -------------------------------------------- | ----------------------------------- | ----------------------------------- |
62| value | {<br>center: [[Length](./ts-types.md#length), Length],<br> radius: number \| string,<br>colors: Array&lt;[[ResourceColor](ts-types.md#resourcecolor), number]&gt;,<br>repeating?: boolean<br>} | Yes| Radial gradient.<br>- **center**: center of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br> Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>- **colors**: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**|
63
64>  **NOTE**
65>
66>  When using the **colors** parameter, take note of the following:
67>
68>  [ResourceColor](ts-types.md#resourcecolor) indicates the color, and **number** indicates the color's position, which ranges from 0 to 1.0: **0** indicates the start of the container, and **1.0** indicates the end of the container. To create a gradient with multiple color stops, you are advised to set **number** in ascending order. If the value of **number** in an array is smaller than that in the previous array, it is considered as equivalent to the value in the previous array.
69
70
71## Example
72
73```ts
74// xxx.ets
75@Entry
76@Component
77struct ColorGradientExample {
78  build() {
79    Column({ space: 5 }) {
80      Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
81      Row()
82        .width('90%')
83        .height(50)
84        .linearGradient({
85          angle: 90,
86          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
87        })
88      Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
89      Row()
90        .width('90%')
91        .height(50)
92        .linearGradient({
93          direction: GradientDirection.Left, // Gradient direction.
94          repeating: true, // Whether the gradient colors are repeated.
95          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
96        })
97    }
98    .width('100%')
99    .padding({ top: 5 })
100  }
101}
102```
103
104![en-us_image_0000001219864149](figures/gradientColor1.png)
105
106```ts
107@Entry
108@Component
109struct ColorGradientExample {
110  build() {
111    Column({ space: 5 }) {
112      Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
113      Row()
114        .width(100)
115        .height(100)
116        .sweepGradient({
117          center: [50, 50],
118          start: 0,
119          end: 359,
120          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
121        })
122
123      Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
124      Row()
125        .width(100)
126        .height(100)
127        .sweepGradient({
128          center: [50, 50],
129          start: 0,
130          end: 359,
131          rotation: 45, // Rotation angle.
132          repeating: true, // Whether the gradient colors are repeated.
133          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
134        })
135    }
136    .width('100%')
137    .padding({ top: 5 })
138  }
139}
140```
141
142![en-us_image_0000001219864149](figures/gradientColor2.png)
143
144```ts
145// xxx.ets
146@Entry
147@Component
148struct ColorGradientExample {
149  build() {
150    Column({ space: 5 }) {
151      Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
152      Row()
153        .width(100)
154        .height(100)
155        .radialGradient({
156          center: [50, 50],
157          radius: 60,
158          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
159        })
160      Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
161      Row()
162        .width(100)
163        .height(100)
164        .radialGradient({
165          center: [50, 50],
166          radius: 60,
167          repeating: true,
168          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
169        })
170    }
171    .width('100%')
172    .padding({ top: 5 })
173  }
174}
175```
176
177![en-us_image_0000001219864149](figures/gradientColor3.png)
178