1# Foreground Blur
2
3You can apply foreground blur effects to a component.
4
5>  **NOTE**
6>
7>  This attribute is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8
9## foregroundBlurStyle
10
11foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions)
12
13Applies a foreground blur style to the component.
14
15**Atomic service API**: This API can be used in atomic services since API version 11.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters**
20
21| Name | Type                                                        | Mandatory| Description                                                        |
22| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
23| value   | [BlurStyle](ts-universal-attributes-background.md#blurstyle9)                 | Yes  | Settings of the foreground blur style.|
24| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions) | No  | Foreground blur options.                                    |
25
26## ForegroundBlurStyleOptions
27Inherited from [BlurStyleOptions](#blurstyleoptions).
28
29**Atomic service API**: This API can be used in atomic services since API version 12.
30
31## BlurStyleOptions
32
33| Name                       | Type                                               | Mandatory| Description                                                        |
34| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
35| colorMode     | [ThemeColorMode](ts-container-with-theme.md#themecolormode10) | No  | Color mode used for the foreground blur.<br>Default value: **ThemeColorMode.SYSTEM**<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
36| adaptiveColor | [AdaptiveColor](#adaptivecolor10)   | No  | Adaptive color mode.<br>Default value: **AdaptiveColor.DEFAULT**<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
37| blurOptions<sup>11+</sup> | [BlurOptions](#bluroptions11)         | No   | Grayscale blur parameters.<br>Default value: **grayscale: [0,0]**<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
38| scale<sup>12+</sup> | number   | No  | Foreground blur scale.<br>Default value: **1.0**<br>Value range: [0.0, 1.0]<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
39
40## AdaptiveColor<sup>10+</sup>
41
42**Atomic service API**: This API can be used in atomic services since API version 11.
43
44**System capability**: SystemCapability.ArkUI.ArkUI.Full
45
46| Name     | Description                       |
47| ------- | ------------------------- |
48| DEFAULT | Adaptive color mode is not used. The default color is used as the mask color. Using a mode other than **DEFAULT** can be more time-consuming.   |
49| AVERAGE | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.|
50
51## BlurOptions<sup>11+</sup>
52Grayscale blur parameters.
53
54**Atomic service API**: This API can be used in atomic services since API version 12.
55
56**System capability**: SystemCapability.ArkUI.ArkUI.Full
57
58| Name       |   Type  |   Mandatory| Description                       |
59| ----        |  ----   |   ---- | --------------------------  |
60| grayscale   |  [number, number]   |   Yes  |  Grayscale blur, with two parameters in the value range of [0, 127]. The color gradation of the black and white in the image is adjusted to create different shades of gray. The first parameter indicates the brightness of the black color, and the second parameter indicates the darkness of the white color. A larger value indicates a more obvious adjustment effect (the black and white colors become grayer). For example, if the value specified is (20,20), the RGB value [0, 0, 0] (black) is converted to [20, 20, 20], RGB value [255, 255, 255] (white) is converted to [235, 235, 235] (255-20), and the color pixels remain unchanged.|
61
62
63## Example
64
65This example demonstrates how to apply content blur to an image using **foregroundBlurStyle**.
66
67```ts
68// xxx.ets
69@Entry
70@Component
71struct ForegroundBlurStyleDemo {
72  build() {
73    Column() {
74      Text('Thin Material').fontSize(30).fontColor(0xCCCCCC)
75      Image($r('app.media.bg'))
76        .width(300)
77        .height(350)
78        .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
79    }
80    .height('100%')
81    .width('100%')
82  }
83}
84```
85
86![en-us_image_background_blur_style](figures/en-us_image_foreground_blur_style.png)
87