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 10## Attributes 11 12 13| Name | Type | Description | 14| -------------- | -------------------------------------------- | ----------------------------------- | 15| linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<br>repeating?: boolean<br>} | 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>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br> Default value: **GradientDirection.Bottom**<br>- **colors**: colors of the linear gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| 16| sweepGradient | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<br>repeating?: boolean<br>} | 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 point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: colors of the sweep gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.<br>When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.| 17| radialGradient | {<br>center: Point,<br> radius: number \| string,<br>colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point 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**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| 18 19 20## Example 21 22```ts 23// xxx.ets 24@Entry 25@Component 26struct ColorGradientExample { 27 build() { 28 Column({ space: 5 }) { 29 Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 30 Row() 31 .width('90%') 32 .height(50) 33 .linearGradient({ 34 angle: 90, 35 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 36 }) 37 Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 38 Row() 39 .width('90%') 40 .height(50) 41 .linearGradient({ 42 direction: GradientDirection.Left, // Gradient direction. 43 repeating: true, // Whether the gradient colors are repeated. 44 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1. 45 }) 46 } 47 .width('100%') 48 .padding({ top: 5 }) 49 } 50} 51``` 52 53 54 55```ts 56@Entry 57@Component 58struct ColorGradientExample { 59 build() { 60 Column({ space: 5 }) { 61 Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 62 Row() 63 .width(100) 64 .height(100) 65 .sweepGradient({ 66 center: [50, 50], 67 start: 0, 68 end: 359, 69 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 70 }) 71 72 Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 73 Row() 74 .width(100) 75 .height(100) 76 .sweepGradient({ 77 center: [50, 50], 78 start: 0, 79 end: 359, 80 rotation: 45, // Rotation angle. 81 repeating: true, // Whether the gradient colors are repeated. 82 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1. 83 }) 84 } 85 .width('100%') 86 .padding({ top: 5 }) 87 } 88} 89``` 90 91 92 93```ts 94// xxx.ets 95@Entry 96@Component 97struct ColorGradientExample { 98 build() { 99 Column({ space: 5 }) { 100 Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 101 Row() 102 .width(100) 103 .height(100) 104 .radialGradient({ 105 center: [50, 50], 106 radius: 60, 107 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 108 }) 109 Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 110 Row() 111 .width(100) 112 .height(100) 113 .radialGradient({ 114 center: [50, 50], 115 radius: 60, 116 repeating: true, 117 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1. 118 }) 119 } 120 .width('100%') 121 .padding({ top: 5 }) 122 } 123} 124``` 125 126 127
