1# Foreground Effect
2
3You can apply different visual effects to foreground subjects.
4
5>  **NOTE**
6>
7>  This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## foregroundEffect
10
11foregroundEffect(options: ForegroundEffectOptions)
12
13Sets the foreground effect of the component.
14
15**Atomic service API**: This API can be used in atomic services since API version 12.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters**
20
21| Name| Type                                                        | Mandatory| Description                                                |
22| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- |
23| options | [ForegroundEffectOptions](#foregroundeffectoptions12) | Yes  | Foreground effect settings, including the blur radius.|
24
25## ForegroundEffectOptions<sup>12+</sup>
26Describes the foreground effect.
27
28**Atomic service API**: This API can be used in atomic services since API version 12.
29
30**System capability**: SystemCapability.ArkUI.ArkUI.Full
31
32| Name       |   Type        |   Mandatory|  Description                       |
33| ----         |  ----         |   ---- | --------------------------  |
34| radius       | number        |   Yes  |   Blur radius.<br>Value range: [0, +∞)<br>Default value: **0**<br> This parameter takes effect only within the component scope. When it is used with other APIs, the effect beyond the component scope does not apply.    |
35
36## Example
37
38This example shows the usage of **foregroundEffect**.
39
40```ts
41// xxx.ets
42@Entry
43@Component
44struct Index {
45  build() {
46    Row() {
47      Image($r('app.media.icon'))
48          .width(100)
49          .height(100)
50          .foregroundEffect({ radius: 20 })
51    }
52    .width('100%')
53    .height('100%')
54    .justifyContent(FlexAlign.Center)
55  }
56}
57```
58
59Below is how the component looks with the foreground effect applied.
60**radius** indicates the blur radius. A larger value creates a more blurred effect.
61
62![foregroundColor_circle](figures/foregroundEffect.jpg)
63