# Filters

<figure><img src="/files/cDRBFPzKILlH5WOjgcqq" 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.

![](/files/ql80GDVSnDkxOXUAujZL)

## 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.

![](/files/6QNSCWX2aczsbRPrDyw5)

### 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.

![](/files/4z6tEr32e5wPtNC0uQlu)

### 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.

![](/files/QC5iBhOYfuN4mInOTzbp)

### 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.

![](/files/4b0i7MlhmHcpI18IscvY)

### 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.

![](/files/75VfpU1lKPNn9A3QZDi9)

### 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.

![](/files/CgSEPaaJoZMPmWGyoqbz)

### 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.

![](/files/i7tYgcX3aJCdIQoQSjq6)

### 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.

![](/files/reF0NXoGrDKUBBVy2MtQ)

### Reset

* Click dot(s) to reset.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/design/effects/filters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
