• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Shadow Effect
2
3
4You can use the [shadow](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#shadow)API to apply a shadow effect to a component. Even better, you can set the parameter of this API to [ShadowOptions](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#shadowoptions) to customize the shadow effect. When the radius or color opacity in **ShadowOptions** is set to **0**, there is no shadow effect.
5
6
7
8```ts
9@Entry
10@Component
11struct ShadowOptionDemo {
12  build() {
13    Row() {
14      Column() {
15        Column() {
16          Text('shadowOption').fontSize(12)
17        }
18        .width(100)
19        .aspectRatio(1)
20        .margin(10)
21        .justifyContent(FlexAlign.Center)
22        .backgroundColor(Color.White)
23        .borderRadius(20)
24        .shadow({ radius: 10, color: Color.Gray })
25
26        Column() {
27          Text('shadowOption').fontSize(12)
28        }
29        .width(100)
30        .aspectRatio(1)
31        .margin(10)
32        .justifyContent(FlexAlign.Center)
33        .backgroundColor('#a8a888')
34        .borderRadius(20)
35        .shadow({
36          radius: 10,
37          color: Color.Gray,
38          offsetX: 20,
39          offsetY: 20
40        })
41      }
42      .width('100%')
43      .height('100%')
44      .justifyContent(FlexAlign.Center)
45    }
46    .height('100%')
47  }
48}
49```
50
51
52
53![en-us_image_0000001598502322](figures/en-us_image_0000001598502322.png)
54