---
title: "OverlayEffect | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/OverlayEffect/"
---

# OverlayEffect

> - [`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged)\<[`OverlayEffect`](#overlayeffect), `string`\>

## Classes

### OverlayEffect

#### Implements

#### Constructors

##### Constructor

```ts
new OverlayEffect(object?): OverlayEffect;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `object?` | \{ `blendMode?`: [`BlendMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/BlendMode.md#blendmode); `color?`: [`Color`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Color.md#abstract-color); `opacity?`: `number`; \} |
| `object.blendMode?` | [`BlendMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/BlendMode.md#blendmode) |
| `object.color?` | [`Color`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Color.md#abstract-color) |
| `object.opacity?` | `number` |

###### Returns

[`OverlayEffect`](#overlayeffect)

#### Properties

##### type

```ts
type: string = OverlayEffect.type;
```

##### type

```ts
static type: string = "OverlayEffect";
```

#### Accessors

##### blendMode

###### Get Signature

```ts
get blendMode(): BlendMode;
```

###### Returns

[`BlendMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/BlendMode.md#blendmode)

###### Set Signature

```ts
set blendMode(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`BlendMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/BlendMode.md#blendmode) |

###### Returns

`void`

##### color

###### Get Signature

```ts
get color(): Color;
```

###### Returns

[`Color`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Color.md#abstract-color)

###### Set Signature

```ts
set color(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`Color`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Color.md#abstract-color) |

###### Returns

`void`

##### opacity

###### Get Signature

```ts
get opacity(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set opacity(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

#### Methods

##### addPropertyChanged()

```ts
addPropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`addPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#addpropertychanged)

##### clone()

```ts
clone(): OverlayEffect;
```

###### Returns

[`OverlayEffect`](#overlayeffect)

##### equals()

```ts
equals(object): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `object` | [`OverlayEffect`](#overlayeffect) |

###### Returns

`boolean`

##### getSimplifiedObject()

```ts
getSimplifiedObject(): object;
```

###### Returns

`object`

###### blendMode

```ts
blendMode: BlendMode;
```

###### color

```ts
color: Color;
```

###### opacity

```ts
opacity: number;
```

##### removePropertyChanged()

```ts
removePropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`removePropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#removepropertychanged)

##### equals()

```ts
static equals(a, b): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `a` | [`OverlayEffect`](#overlayeffect) |
| `b` | [`OverlayEffect`](#overlayeffect) |

###### Returns

`boolean`