# Filters

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fs1FbVXuuaXqjq6vcNBOU%2FScreenshot%202023-07-01%20at%2011.06.15.png?alt=media&#x26;token=f1b0e96c-fc65-4928-8cf7-1cba7026e334" alt=""><figcaption></figcaption></figure>

Filters can give a  refreshing look to your website without overloading it.&#x20;

They can enrich your designs to convey emotions.&#x20;

They can mute a slider or section with videos  without taking  attention away from the important elements.&#x20;

And filters help establish a solid foundation for foreground content, while taking care of accessibility.&#x20;

You can add as many filters as you like.

Filters can be accessed from the Filters tab which is in the Effects tab of the Design tab.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F2VCQ2eVeOY5It7lD44Dr%2FScreenshot%202023-07-01%20at%2011.08.31.png?alt=media\&token=aadafcd8-a381-4d5e-a4e7-b17694688a35)

## Blur

The Blur property defines the amount of Gaussian blur to apply to an element such as: blur, brightness, contrast, greyscale.

### Modify

* Select a block.
* Open the Block Inspector
* Navigate to the Design tab
* Open the Effects tab.
* Select the Filters tab.
* Find the Blur property.
* Slide or input the desired blur value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FTcgKePIAIZMbosJORuKG%2FScreenshot%202023-07-01%20at%2011.10.01.png?alt=media\&token=55aec721-bcd1-4d25-85dc-86ad78bb5838)

### Reset

* Click dot(s) to reset.

## Brightness

The Brightness property defines the amount of colour brightness to apply to an element.

### Modify

* Select a block.
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Effects tab.
* Select the Filters tab.
* Find the Brightness property.
* Adjust to the desired brightness value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FMnXenCjbIZ3mSAV7YNzn%2FScreenshot%202023-07-01%20at%2011.11.03.png?alt=media\&token=9130e699-6c06-4cd3-bda1-8b5a563b8d09)

### Reset

* Click dot(s) to reset.

## Contrast

The Contrast property defines the amount of colour contrast effect to apply to an element.

### Modify

* Select a block.
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Effects tab.
* Select the Filters tab.
* Find the Contrast property.
* Adjust to the desired contrast value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FTdfWXoS6DIr913t0VQaK%2FScreenshot%202023-07-01%20at%2011.11.49.png?alt=media\&token=4ebe86fa-b5f2-4757-b235-cd632b35d252)

### Reset

* Click dot(s) to reset.

## Grayscale

The Grayscale property defines the amount of grayscale effect to apply to an element.

### Modify

* Select a block.
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Effects tab.
* Select the Filters tab.
* Find the Grayscale property.
* Adjust to the desired grayscale value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FWes0FA3xxtRCwdMWXBTs%2FScreenshot%202023-07-01%20at%2011.12.32.png?alt=media\&token=b8592ed3-b787-4b7b-91ed-4789854e3d60)

### Reset

* Click dot(s) to reset.

## Hue-Rotate

The Hue Rotate property takes the colour wheel and spins it the number of degrees you specify, changing every colour accordingly.

### Modify

* *Select a block.*
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Effects tab.
* Select the Filters tab.
* Find the Hue Rotate property.
* Adjust to the desired hue rotate value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FOqWzqnpibKtdNk5dStuv%2FScreenshot%202023-07-01%20at%2011.13.21.png?alt=media\&token=3aa35bf0-a5a3-445d-8415-213297842019)

### Reset

* Click dot(s) to reset.

## Invert

The Invert property reverses the colours of the element.

### Modify

* Select a block.
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Effects tab.
* Select the Filters tab.
* Find the Invert property.
* Adjust to the desired invert value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FkoTznqfJmGFOSfcZ3W5s%2FScreenshot%202023-07-01%20at%2011.14.24.png?alt=media\&token=251d950e-b8e1-462d-9f92-3561b690d3ec)

### Reset

* Click dot(s) to reset.

## Saturate

The Saturate property defines the intensity of the colour. The higher the percentage, the more vivid the colour.

### Modify

* Select a block.
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Effects tab.
* Select the Filters tab.
* Find the Saturate property.
* Adjust to the desired saturate value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FhiSL9IitFzQQOKECb86s%2FScreenshot%202023-07-01%20at%2011.15.14.png?alt=media\&token=fee2dd95-1520-40d4-b1a9-0887bec972c9)

### Reset

* Click dot(s) to reset.

## Sepia

The Sepia property defines the amount of sepia colour to apply to an element.

### Modify

* Select a block.
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Effects tab.
* Select the Filters tab.
* Find the Sepia property.
* Adjust to the desired sepia value.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FQ5unTVbfKtQLvkfDvKnx%2FScreenshot%202023-07-01%20at%2011.16.02.png?alt=media\&token=72c1bd42-a9e8-4536-a86d-9719d3f5fd9d)

### Reset

* Click dot(s) to reset.