> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/design/effects/filters.md).

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