1# EffectComponent (System API)
2
3The **EffectComponent** component defines combined special effects for child components to optimize the special effect drawing performance.
4
5>  **NOTE**
6>
7> - This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> - The APIs provided by this component are system APIs.
10>
11> - Currently, this component provides only combined background blur effects for child components.
12>
13> - To use this component for combined background blur effects, first replace the **backgroundBlurStyle(BlurStyle)** attribute of the target child components with **useEffect(true)**.
14
15
16## Child Components
17
18Supported
19
20
21## APIs
22
23EffectComponent()
24
25Creates an **EffectComponent** component.
26
27## Events
28
29The universal events are not supported.
30
31## Attributes
32
33The universal attributes are supported. Currently, this component only works with the **backgroundBlurStyle** attribute.
34
35## Example
36
37```ts
38//Index.ets
39@Entry
40@Component
41struct Index {
42  build() {
43    Stack() {
44      Image($r("app.media.example"))
45        .autoResize(true)
46      EffectComponent() {
47        Column({ space: 20 }) {
48          // Use backgroundBlurStyle to apply a background blur effect.
49          Text("Normal text with backgroundBlurStyle")
50            .textAlign(TextAlign.Center)
51            .fontSize(16)
52            .fontWeight(FontWeight.Medium)
53            .backgroundBlurStyle(BlurStyle.Thick)
54            .borderRadius(16)
55            .width('90%')
56            .height('48')
57
58          // Do not apply a background blur effect.
59          Text("Normal text without blur effect")
60            .textAlign(TextAlign.Center)
61            .fontSize(16)
62            .fontWeight(FontWeight.Medium)
63            .border({ width: 1 })
64            .borderRadius(16)
65            .width('90%')
66            .height('48')
67
68          // Use useEffect to combine drawing of the background blur effect, with blur settings inherited from <EffectComponent>.
69          Text("Normal text with useEffect blur 1")
70            .textAlign(TextAlign.Center)
71            .useEffect(true)
72            .fontSize(16)
73            .fontWeight(FontWeight.Medium)
74            .borderRadius(16)
75            .width('90%')
76            .height('48')
77
78          // Use useEffect to combine drawing of the background blur effect, with blur settings inherited from <EffectComponent>.
79          Text("Normal text with useEffect blur 2")
80            .textAlign(TextAlign.Center)
81            .useEffect(true)
82            .fontSize(16)
83            .fontWeight(FontWeight.Medium)
84            .borderRadius(16)
85            .width('90%')
86            .height('48')
87        }
88        .width('100%')
89      }
90      .backgroundBlurStyle(BlurStyle.Thin)
91    }
92    .backgroundColor(Color.Black)
93    .width('100%')
94    .height('100%')
95  }
96}
97```
98
99![en-us_image_effectcomponent](figures/en-us_image_effectcomponent.png)
100