# Blur Effect Animation effects can add detail to your animations and create a sense of realism. For example, blur and shadow effects can lend a 3D look to objects and deliver a more engaging animation experience. ArkUI provides a diverse array of efficient APIs for you to develop exquisite and personalized effects. This topic covers the common blur, shadow, and color effects. Blur effects add a sense of depth and allow for distinction of hierarchical relationship between elements. | API | Description | | ---------------------------------------- | ---------------------- | | [backdropBlur](../reference/arkui-ts/ts-universal-attributes-image-effect.md) | Applies a background blur effect to the component. The input parameter is the blur radius.| | [blur](../reference/arkui-ts/ts-universal-attributes-image-effect.md) | Applies a foreground blur effect to the component. The input parameter is the blur radius.| | [backgroundBlurStyle](../reference/arkui-ts/ts-universal-attributes-background.md) | Applies a background blur effect to the component. The input parameter is the blur style.| | [foregroundBlurStyle](../reference/arkui-ts/ts-universal-attributes-foreground-blur-style.md) | Applies a foreground blur effect to the component. The input parameter is the blur style.| ## Applying Background Blur with backdropBlur ```ts @Entry @Component struct BlurEffectsExample { build() { Column({ space: 10 }) { Text('backdropblur') .width('90%') .height('90%') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .backdropBlur(10) // Apply background blur. .backgroundImage($r('app.media.share')) .backgroundImageSize({ width: 400, height: 300 }) } .width('100%') .height('50%') .margin({ top: 20 }) } } ``` ![en-us_image_0000001599812870](figures/en-us_image_0000001599812870.png) ## Applying Foreground Blur with blur ```ts @Entry @Component struct Index { @State radius: number = 0; @State text: string = ''; @State y: string = 'Finger not on the screen'; aboutToAppear() { this.text = "Press a finger on the screen and slide up and down\n" + "Current finger position on the y-axis: " + this.y + "\n" + "Blur radius:" + this.radius; } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Text(this.text) .height(200) .fontSize(20) .fontWeight(FontWeight.Bold) .fontFamily("cursive") .fontStyle(FontStyle.Italic) Image($r("app.media.wall")) .blur(this.radius) // Apply foreground blur. .height('100%') .width("100%") .objectFit(ImageFit.Cover) }.height('100%') .width("100%") .onTouch((event: TouchEvent) => { if (event.type === TouchType.Move) { this.y = parseInt(event.touches[0].y.toString()).toString(); this.radius = parseInt(this.y) / 10; // Modify the blur radius based on the sliding distance. } if (event.type === TouchType.Up) { this.radius = 0; this.y = 'Finger off the screen'; } this.text = "Press a finger on the screen and slide up and down\n" + "Current finger position on the y-axis: " + this.y + "\n" + "Blur radius:" + this.radius; }) } } ``` ![en-us_image_0000001599813588](figures/en-us_image_0000001599813588.gif) ## Applying Background Blur with backgroundBlurStyle ```ts @Entry @Component struct BackDropBlurStyleDemo { build() { Grid() { GridItem() { Column() { Column() { Text ('Original') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) Text ('Original') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Thin') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) // BlurStyle.Thin: Thin blur is applied. // ThemeColorMode.LIGHT: The light color mode is used. // AdaptiveColor.DEFAULT: Adaptive color mode is not used. The default color is used as the mask color. // scale: blurredness of the background material. The default value is 1. .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Thin') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Regular') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.Regular, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Regular') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Thick') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.Thick, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Thick') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_THIN') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_THIN') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_REGULAR') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_REGULAR') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_THICK') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_THICK') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_ULTRA_THICK') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_ULTRA_THICK') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) } .columnsTemplate('1fr 1fr') .rowsTemplate('1fr 1fr 1fr 1fr') .width('100%') .height('100%') .margin({ top: 40 }) } } ``` ![en-us_image_0000001649455517](figures/en-us_image_0000001649455517.png) ## Applying Foreground Blur with foregroundBlurStyle ```ts @Entry @Component struct ForegroundBlurStyleDemo { build() { Grid() { GridItem() { Column() { Column() { Text ('Original') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) Text ('Original') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Thin') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) // BlurStyle.Thin: Thin blur is applied. // ThemeColorMode.LIGHT: The light color mode is used. // AdaptiveColor.DEFAULT: Adaptive color mode is not used. The default color is used as the mask color. // scale: blurredness of the background material. The default value is 1. .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Thin') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Regular') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.Regular, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Regular') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Thick') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.Thick, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Thick') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_THIN') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.BACKGROUND_THIN, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_THIN') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_REGULAR') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_REGULAR') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_THICK') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.BACKGROUND_THICK, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_THICK') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_ULTRA_THICK') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_ULTRA_THICK') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) } .columnsTemplate('1fr 1fr') .rowsTemplate('1fr 1fr 1fr 1fr') .width('100%') .height('100%') .margin({ top: 40 }) } } ``` ![en-us_image_0000001599658168](figures/en-us_image_0000001599658168.png)