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

# FiltersEffect

> - [`BaseImageEffect`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseImageEffect.md#baseimageeffect)

## Classes

### FiltersEffect

#### Extends

#### Constructors

##### Constructor

```ts
new FiltersEffect(
   brightness, 
   contrast, 
   hue, 
   saturation, 
   grayscale, 
   sepia): FiltersEffect;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `brightness` | `number` |
| `contrast` | `number` |
| `hue` | `number` |
| `saturation` | `number` |
| `grayscale` | `boolean` |
| `sepia` | `boolean` |

###### Returns

[`FiltersEffect`](#filterseffect)

###### Overrides

[`BaseImageEffect`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseImageEffect.md#baseimageeffect).[`constructor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseImageEffect.md#constructor)

#### Properties

##### brightness

```ts
brightness: number = 0;
```

##### contrast

```ts
contrast: number = 0;
```

##### grayscale

```ts
grayscale: boolean = false;
```

##### hue

```ts
hue: number = 0;
```

##### saturation

```ts
saturation: number = 0;
```

##### sepia

```ts
sepia: boolean = false;
```

##### type

```ts
type: string = "FiltersEffect";
```