1# Blur Effect
2
3Animation 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.
4
5
6Blur effects add a sense of depth and allow for distinction of hierarchical relationship between elements.
7
8
9| API                                                        | Description                                        |
10| ------------------------------------------------------------ | -------------------------------------------- |
11| [backdropBlur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md#backdropblur) | Applies a background blur effect to the component. The input parameter is the blur radius.|
12| [blur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#blur) | Applies a foreground blur effect to the component. The input parameter is the blur radius.|
13| [backgroundBlurStyle](../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md#backgroundblurstyle9) | Applies a background blur effect to the component. The input parameter is the blur style.|
14| [foregroundBlurStyle](../reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md#foregroundblurstyle) | Applies a foreground blur effect to the component. The input parameter is the blur style.|
15| [motionBlur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-motionBlur.md#motionblur) | Applies a motion blur effect to the component being scaled or moved. The input parameters are the blur radius and anchor point coordinates.|
16
17>  **NOTE**
18>
19>  The preceding APIs provide real-time blurring by rendering each frame, which can be performance-intensive. For static blur effects where content and radius remain unchanged, you are advised to use the static [blur](../reference/apis-arkgraphics2d/js-apis-effectKit.md#blur) API to reduce the load.
20
21## Applying Background Blur with backdropBlur
22
23
24```ts
25@Entry
26@Component
27struct BlurEffectsExample {
28  build() {
29    Column({ space: 10 }) {
30      Text('backdropBlur')
31        .width('90%')
32        .height('90%')
33        .fontSize(20)
34        .fontColor(Color.White)
35        .textAlign(TextAlign.Center)
36        .backdropBlur(10) // Apply background blur.
37        .backgroundImage($r('app.media.share'))
38        .backgroundImageSize({ width: 400, height: 300 })
39    }
40    .width('100%')
41    .height('50%')
42    .margin({ top: 20 })
43  }
44}
45```
46
47
48
49![en-us_image_0000001599812870](figures/en-us_image_0000001599812870.png)
50
51
52## Applying Foreground Blur with blur
53
54
55```ts
56@Entry
57@Component
58struct Index1 {
59  @State radius: number = 0;
60  @State text: string = '';
61  @State y: string = 'Finger not on the screen';
62
63  aboutToAppear() {
64    this.text = "Press a finger on the screen and slide up and down\n" + "Current finger position on the y-axis: " + this.y +
65    "\n" + "Blur radius:" + this.radius;
66  }
67
68  build() {
69    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
70      Text(this.text)
71        .height(200)
72        .fontSize(20)
73        .fontWeight(FontWeight.Bold)
74        .fontFamily("cursive")
75        .fontStyle(FontStyle.Italic)
76      Image($r("app.media.wall"))
77        .blur(this.radius) // Apply foreground blur.
78        .height('100%')
79        .width("100%")
80        .objectFit(ImageFit.Cover)
81    }.height('100%')
82    .width("100%")
83    .onTouch((event?: TouchEvent) => {
84      if(event){
85        if (event.type === TouchType.Move) {
86          this.y = Number(event.touches[0].y.toString()).toString();
87          this.radius = Number(this.y) / 10; // Modify the blur radius based on the sliding distance.
88        }
89        if (event.type === TouchType.Up) {
90          this.radius = 0;
91          this.y = 'Finger off the screen';
92        }
93      }
94      this.text = "Press a finger on the screen and slide up and down\n" + "Current finger position on the y-axis: " + this.y +
95      "\n" + "Blur radius:" + this.radius;
96    })
97  }
98}
99```
100
101
102
103![en-us_image_0000001599813588](figures/en-us_image_0000001599813588.gif)
104
105
106## Applying Background Blur with backgroundBlurStyle
107
108
109```ts
110@Entry
111@Component
112struct BackDropBlurStyleDemo {
113  build() {
114    Grid() {
115      GridItem() {
116        Column() {
117          Column() {
118            Text('Original')
119              .fontSize(20)
120              .fontColor(Color.White)
121              .textAlign(TextAlign.Center)
122              .width('100%')
123              .height('100%')
124          }
125          .height(100)
126          .aspectRatio(1)
127          .borderRadius(10)
128          .backgroundImage($r('app.media.share'))
129
130          Text('Original')
131            .fontSize(12)
132            .fontColor(Color.Black)
133        }
134        .height('100%')
135        .justifyContent(FlexAlign.Start)
136      }
137      .width(200)
138      .height(200)
139
140      GridItem() {
141        Column() {
142          Column() {
143            Text('Thin')
144              .fontSize(20)
145              .fontColor(Color.White)
146              .textAlign(TextAlign.Center)
147              .width('100%')
148              .height('100%')
149          }
150          .height(100)
151          .aspectRatio(1)
152          .borderRadius(10)
153          .backgroundImage($r('app.media.share'))
154          // BlurStyle.Thin: Thin blur is applied.
155          // ThemeColorMode.LIGHT: The light color mode is used.
156          // AdaptiveColor.DEFAULT: Adaptive color mode is not used. The default color is used as the mask color.
157          // scale: blurredness of the background material. The default value is 1.
158          .backgroundBlurStyle(BlurStyle.Thin, {
159            colorMode: ThemeColorMode.LIGHT,
160            adaptiveColor: AdaptiveColor.DEFAULT,
161            scale: 0.1
162          })
163
164          Text('Thin')
165            .fontSize(12)
166            .fontColor(Color.Black)
167        }
168        .height('100%')
169        .justifyContent(FlexAlign.Start)
170      }
171      .width(200)
172      .height(200)
173
174      GridItem() {
175        Column() {
176          Column() {
177            Text('Regular')
178              .fontSize(20)
179              .fontColor(Color.White)
180              .textAlign(TextAlign.Center)
181              .width('100%')
182              .height('100%')
183          }
184          .height(100)
185          .aspectRatio(1)
186          .borderRadius(10)
187          .backgroundImage($r('app.media.share'))
188          .backgroundBlurStyle(BlurStyle.Regular, {
189            colorMode: ThemeColorMode.LIGHT,
190            adaptiveColor: AdaptiveColor.DEFAULT,
191            scale: 0.1
192          })
193
194          Text('Regular')
195            .fontSize(12)
196            .fontColor(Color.Black)
197        }
198        .height('100%')
199        .justifyContent(FlexAlign.Start)
200      }
201      .width(200)
202      .height(200)
203
204      GridItem() {
205        Column() {
206          Column() {
207            Text('Thick')
208              .fontSize(20)
209              .fontColor(Color.White)
210              .textAlign(TextAlign.Center)
211              .width('100%')
212              .height('100%')
213          }
214          .height(100)
215          .aspectRatio(1)
216          .borderRadius(10)
217          .backgroundImage($r('app.media.share'))
218          .backgroundBlurStyle(BlurStyle.Thick, {
219            colorMode: ThemeColorMode.LIGHT,
220            adaptiveColor: AdaptiveColor.DEFAULT,
221            scale: 0.1
222          })
223
224          Text('Thick')
225            .fontSize(12)
226            .fontColor(Color.Black)
227        }
228        .height('100%')
229        .justifyContent(FlexAlign.Start)
230      }
231      .width(200)
232      .height(200)
233
234      GridItem() {
235        Column() {
236          Column() {
237            Text('BACKGROUND_THIN')
238              .fontSize(12)
239              .fontColor(Color.White)
240              .textAlign(TextAlign.Center)
241              .width('100%')
242              .height('100%')
243          }
244          .height(100)
245          .aspectRatio(1)
246          .borderRadius(10)
247          .backgroundImage($r('app.media.share'))
248          .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN, {
249            colorMode: ThemeColorMode.LIGHT,
250            adaptiveColor: AdaptiveColor.DEFAULT,
251            scale: 0.1
252          })
253
254          Text('BACKGROUND_THIN')
255            .fontSize(12)
256            .fontColor(Color.Black)
257        }
258        .height('100%')
259        .justifyContent(FlexAlign.Start)
260      }
261      .width(200)
262      .height(200)
263
264      GridItem() {
265        Column() {
266          Column() {
267            Text('BACKGROUND_REGULAR')
268              .fontSize(12)
269              .fontColor(Color.White)
270              .textAlign(TextAlign.Center)
271              .width('100%')
272              .height('100%')
273          }
274          .height(100)
275          .aspectRatio(1)
276          .borderRadius(10)
277          .backgroundImage($r('app.media.share'))
278          .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, {
279            colorMode: ThemeColorMode.LIGHT,
280            adaptiveColor: AdaptiveColor.DEFAULT,
281            scale: 0.1
282          })
283
284          Text('BACKGROUND_REGULAR')
285            .fontSize(12)
286            .fontColor(Color.Black)
287        }
288        .height('100%')
289        .justifyContent(FlexAlign.Start)
290      }
291      .width(200)
292      .height(200)
293
294      GridItem() {
295        Column() {
296          Column() {
297            Text('BACKGROUND_THICK')
298              .fontSize(12)
299              .fontColor(Color.White)
300              .textAlign(TextAlign.Center)
301              .width('100%')
302              .height('100%')
303          }
304          .height(100)
305          .aspectRatio(1)
306          .borderRadius(10)
307          .backgroundImage($r('app.media.share'))
308          .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK, {
309            colorMode: ThemeColorMode.LIGHT,
310            adaptiveColor: AdaptiveColor.DEFAULT,
311            scale: 0.1
312          })
313
314          Text('BACKGROUND_THICK')
315            .fontSize(12)
316            .fontColor(Color.Black)
317        }
318        .height('100%')
319        .justifyContent(FlexAlign.Start)
320      }
321      .width(200)
322      .height(200)
323
324      GridItem() {
325        Column() {
326          Column() {
327            Text('BACKGROUND_ULTRA_THICK')
328              .fontSize(12)
329              .fontColor(Color.White)
330              .textAlign(TextAlign.Center)
331              .width('100%')
332              .height('100%')
333          }
334          .height(100)
335          .aspectRatio(1)
336          .borderRadius(10)
337          .backgroundImage($r('app.media.share'))
338          .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, {
339            colorMode: ThemeColorMode.LIGHT,
340            adaptiveColor: AdaptiveColor.DEFAULT,
341            scale: 0.1
342          })
343
344          Text('BACKGROUND_ULTRA_THICK')
345            .fontSize(12)
346            .fontColor(Color.Black)
347        }
348        .height('100%')
349        .justifyContent(FlexAlign.Start)
350      }
351      .width(200)
352      .height(200)
353    }
354    .columnsTemplate('1fr 1fr')
355    .rowsTemplate('1fr 1fr 1fr 1fr')
356    .width('100%')
357    .height('100%')
358    .margin({ top: 40 })
359  }
360}
361```
362
363
364
365![en-us_image_0000001649455517](figures/en-us_image_0000001649455517.png)
366
367
368
369## Applying Foreground Blur with foregroundBlurStyle
370
371
372```ts
373@Entry
374@Component
375struct ForegroundBlurStyleDemo {
376  build() {
377    Grid() {
378      GridItem() {
379        Column() {
380          Column() {
381            Text('Original')
382              .fontSize(20)
383              .fontColor(Color.White)
384              .textAlign(TextAlign.Center)
385              .width('100%')
386              .height('100%')
387          }
388          .height(100)
389          .aspectRatio(1)
390          .borderRadius(10)
391          .backgroundImage($r('app.media.share'))
392
393          Text('Original')
394            .fontSize(12)
395            .fontColor(Color.Black)
396        }
397        .height('100%')
398        .justifyContent(FlexAlign.Start)
399      }
400      .width(200)
401      .height(200)
402
403      GridItem() {
404        Column() {
405          Column() {
406            Text('Thin')
407              .fontSize(20)
408              .fontColor(Color.White)
409              .textAlign(TextAlign.Center)
410              .width('100%')
411              .height('100%')
412          }
413          .height(100)
414          .aspectRatio(1)
415          .borderRadius(10)
416          .backgroundImage($r('app.media.share'))
417          // BlurStyle.Thin: Thin blur is applied.
418          // ThemeColorMode.LIGHT: The light color mode is used.
419          // AdaptiveColor.DEFAULT: Adaptive color mode is not used. The default color is used as the mask color.
420          // scale: blurredness of the background material. The default value is 1.
421          .foregroundBlurStyle(BlurStyle.Thin, {
422            colorMode: ThemeColorMode.LIGHT,
423            adaptiveColor: AdaptiveColor.DEFAULT,
424            scale: 0.1
425          })
426
427          Text('Thin')
428            .fontSize(12)
429            .fontColor(Color.Black)
430        }
431        .height('100%')
432        .justifyContent(FlexAlign.Start)
433      }
434      .width(200)
435      .height(200)
436
437      GridItem() {
438        Column() {
439          Column() {
440            Text('Regular')
441              .fontSize(20)
442              .fontColor(Color.White)
443              .textAlign(TextAlign.Center)
444              .width('100%')
445              .height('100%')
446          }
447          .height(100)
448          .aspectRatio(1)
449          .borderRadius(10)
450          .backgroundImage($r('app.media.share'))
451          .foregroundBlurStyle(BlurStyle.Regular, {
452            colorMode: ThemeColorMode.LIGHT,
453            adaptiveColor: AdaptiveColor.DEFAULT,
454            scale: 0.1
455          })
456
457          Text('Regular')
458            .fontSize(12)
459            .fontColor(Color.Black)
460        }
461        .height('100%')
462        .justifyContent(FlexAlign.Start)
463      }
464      .width(200)
465      .height(200)
466
467      GridItem() {
468        Column() {
469          Column() {
470            Text('Thick')
471              .fontSize(20)
472              .fontColor(Color.White)
473              .textAlign(TextAlign.Center)
474              .width('100%')
475              .height('100%')
476          }
477          .height(100)
478          .aspectRatio(1)
479          .borderRadius(10)
480          .backgroundImage($r('app.media.share'))
481          .foregroundBlurStyle(BlurStyle.Thick, {
482            colorMode: ThemeColorMode.LIGHT,
483            adaptiveColor: AdaptiveColor.DEFAULT,
484            scale: 0.1
485          })
486
487          Text('Thick')
488            .fontSize(12)
489            .fontColor(Color.Black)
490        }
491        .height('100%')
492        .justifyContent(FlexAlign.Start)
493      }
494      .width(200)
495      .height(200)
496
497      GridItem() {
498        Column() {
499          Column() {
500            Text('BACKGROUND_THIN')
501              .fontSize(12)
502              .fontColor(Color.White)
503              .textAlign(TextAlign.Center)
504              .width('100%')
505              .height('100%')
506          }
507          .height(100)
508          .aspectRatio(1)
509          .borderRadius(10)
510          .backgroundImage($r('app.media.share'))
511          .foregroundBlurStyle(BlurStyle.BACKGROUND_THIN, {
512            colorMode: ThemeColorMode.LIGHT,
513            adaptiveColor: AdaptiveColor.DEFAULT,
514            scale: 0.1
515          })
516
517          Text('BACKGROUND_THIN')
518            .fontSize(12)
519            .fontColor(Color.Black)
520        }
521        .height('100%')
522        .justifyContent(FlexAlign.Start)
523      }
524      .width(200)
525      .height(200)
526
527      GridItem() {
528        Column() {
529          Column() {
530            Text('BACKGROUND_REGULAR')
531              .fontSize(12)
532              .fontColor(Color.White)
533              .textAlign(TextAlign.Center)
534              .width('100%')
535              .height('100%')
536          }
537          .height(100)
538          .aspectRatio(1)
539          .borderRadius(10)
540          .backgroundImage($r('app.media.share'))
541          .foregroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, {
542            colorMode: ThemeColorMode.LIGHT,
543            adaptiveColor: AdaptiveColor.DEFAULT,
544            scale: 0.1
545          })
546
547          Text('BACKGROUND_REGULAR')
548            .fontSize(12)
549            .fontColor(Color.Black)
550        }
551        .height('100%')
552        .justifyContent(FlexAlign.Start)
553      }
554      .width(200)
555      .height(200)
556
557      GridItem() {
558        Column() {
559          Column() {
560            Text('BACKGROUND_THICK')
561              .fontSize(12)
562              .fontColor(Color.White)
563              .textAlign(TextAlign.Center)
564              .width('100%')
565              .height('100%')
566          }
567          .height(100)
568          .aspectRatio(1)
569          .borderRadius(10)
570          .backgroundImage($r('app.media.share'))
571          .foregroundBlurStyle(BlurStyle.BACKGROUND_THICK, {
572            colorMode: ThemeColorMode.LIGHT,
573            adaptiveColor: AdaptiveColor.DEFAULT,
574            scale: 0.1
575          })
576
577          Text('BACKGROUND_THICK')
578            .fontSize(12)
579            .fontColor(Color.Black)
580        }
581        .height('100%')
582        .justifyContent(FlexAlign.Start)
583      }
584      .width(200)
585      .height(200)
586
587      GridItem() {
588        Column() {
589          Column() {
590            Text('BACKGROUND_ULTRA_THICK')
591              .fontSize(12)
592              .fontColor(Color.White)
593              .textAlign(TextAlign.Center)
594              .width('100%')
595              .height('100%')
596          }
597          .height(100)
598          .aspectRatio(1)
599          .borderRadius(10)
600          .backgroundImage($r('app.media.share'))
601          .foregroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, {
602            colorMode: ThemeColorMode.LIGHT,
603            adaptiveColor: AdaptiveColor.DEFAULT,
604            scale: 0.1
605          })
606
607          Text('BACKGROUND_ULTRA_THICK')
608            .fontSize(12)
609            .fontColor(Color.Black)
610        }
611        .height('100%')
612        .justifyContent(FlexAlign.Start)
613      }
614      .width(200)
615      .height(200)
616    }
617    .columnsTemplate('1fr 1fr')
618    .rowsTemplate('1fr 1fr 1fr 1fr')
619    .width('100%')
620    .height('100%')
621    .margin({ top: 40 })
622  }
623}
624```
625
626
627
628![en-us_image_0000001599658168](figures/en-us_image_0000001599658168.png)
629
630
631## Applying Motion Blur with motionBlur
632
633```ts
634import { curves } from '@kit.ArkUI';
635
636@Entry
637@Component
638struct motionBlurTest {
639  @State widthSize: number = 400
640  @State heightSize: number = 320
641  @State flag: boolean = true
642  @State radius: number = 0
643  @State x: number = 0
644  @State y: number = 0
645
646  build() {
647    Column() {
648      Column() {
649        Image($r('app.media.testImg'))
650          .width(this.widthSize)
651          .height(this.heightSize)
652          .onClick(() => {
653            this.radius = 5;
654            this.x = 0.5;
655            this.y = 0.5;
656            if (this.flag) {
657              this.widthSize = 100;
658              this.heightSize = 80;
659            } else {
660              this.widthSize = 400;
661              this.heightSize = 320;
662            }
663            this.flag = !this.flag;
664          })
665          .animation({
666            duration: 2000,
667            curve: curves.springCurve(10, 1, 228, 30),
668            onFinish: () => {
669              this.radius = 0;
670            }
671          })
672          .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } })
673      }
674    }.width('100%').margin({ top: 5 })
675  }
676}
677```
678
679![motionBlurTest](figures/motionBlur.gif)
680