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## Attributes 10| Name| Type| Description| 11| -------- | -------- | -------- | 12| foregroundBlurStyle | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options?:[ForegroundBlurStyleOptions](#foregroundblurstyleoptions10) | Foreground blur style applied to the component.<br>**value**: settings of the foreground blur style, including the blur radius, mask color, mask opacity, saturation, and brightness.<br>**options**: foreground blur options. This parameter is optional.| 13 14## ForegroundBlurStyleOptions 15 16| Name | Type | Mandatory| Description | 17| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 18| colorMode | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No | Color mode used for the foreground blur.<br>Default value: **ThemeColorMode.System**| 19| adaptiveColor | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No | Adaptive color mode.<br>Default value: **AdaptiveColor.Default**| 20| scale | number | No | Foreground blur scale. This API is a system API.<br>Default value: **1.0**<br>Value range: [0.0, 1.0]<br>| 21 22## Example 23 24### Example 1 25 26```ts 27// xxx.ets 28@Entry 29@Component 30struct ForegroundBlurStyleDemo { 31 build() { 32 Column() { 33 Text('Thin Material').fontSize(30).fontColor(0xCCCCCC) 34 Image($r('app.media.bg')) 35 .width(300) 36 .height(350) 37 .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 38 } 39 .height('100%') 40 .width('100%') 41 } 42} 43``` 44 45 46
