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({ radius: 10, color: Color.Gray, offsetX: 20, offsetY: 20 })
36      }
37      .width('100%')
38      .height('100%')
39      .justifyContent(FlexAlign.Center)
40    }
41    .height('100%')
42  }
43}
44```
45
46
47
48![en-us_image_0000001598502322](figures/en-us_image_0000001598502322.png)
49