1# @ohos.graphics.uiEffect (Cascading Effect)
2
3The uiEffect module provides basic capabilities to apply an effect, for example, blur, pixel stretch, and brightness, to a component. Effects are classified into filters and visual effects. Effects of the same category can be cascaded in an effect instance of the corresponding category. In actual development, the blur effect can be used for background blurring, and the brightness effect can be used for screen-on display.
4
5- [Filter](#filter): applies a filter to a component.
6- [VisualEffect](#visualeffect): applies a visual effect to a component.
7
8> **NOTE**
9>
10> The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version.
11
12## Modules to Import
13
14```ts
15import { uiEffect } from "@kit.ArkGraphics2D";
16```
17
18## uiEffect.createFilter
19createFilter(): Filter
20
21Creates a **Filter** instance, which can be used to apply multiple filters to a component.
22
23**System capability**: SystemCapability.Graphics.Drawing
24
25**Return value**
26
27| Type             | Description                |
28| ------------------| ------------------- |
29| [Filter](#filter) | Head node of the filter.|
30
31**Example**
32
33```ts
34let filter : uiEffect.Filter = uiEffect.createFilter()
35```
36
37## uiEffect.createEffect
38createEffect(): VisualEffect
39
40Creates a **VisualEffect** instance, which can be used to apply multiple visual effects to a component.
41
42**System capability**: SystemCapability.Graphics.Drawing
43
44**Return value**
45
46| Type                         | Description                      |
47| ----------------------------- | ------------------------- |
48| [VisualEffect](#visualeffect) | Head node of the visual effect.|
49
50**Example**
51
52```ts
53let visualEffect : uiEffect.VisualEffect = uiEffect.createEffect()
54```
55
56## Filter
57A class that can apply a filter to a component. Before calling any API in **Filter**, you must use [createFilter](#uieffectcreatefilter) to create a **Filter** instance.
58
59### blur
60blur(blurRadius: number): Filter
61
62Applies the blur effect to the component.
63
64**System capability**: SystemCapability.Graphics.Drawing
65
66**Parameters**
67| Name      | Type  | Mandatory| Description      |
68| ----------- | -------| ---- | --------- |
69| blurRadius  | number | Yes  | Blur radius.<br>The value must be greater than or equal to 0. The larger the radius is, the more blurred the content is.<br>If the value is 0, the content is not blurred.|
70
71**Return value**
72
73| Type              | Description                      |
74| ----------------- | -------------------------- |
75| [Filter](#filter) | **Filter** instance with the blur effect.|
76
77**Example**
78
79```ts
80filter.blur(20)
81```
82
83## VisualEffect
84A class that can apply a visual effect to a component. Before calling any API in **VisualEffect**, you must use [createEffect](#uieffectcreateeffect) to create a **VisualEffect** instance.
85