Filters
Last updated
Was this helpful?
Last updated
Was this helpful?
Filters can give a refreshing look to your website without overloading it.
They can enrich your designs to convey emotions.
They can mute a slider or section with videos without taking attention away from the important elements.
And filters help establish a solid foundation for foreground content, while taking care of accessibility.
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.
The Blur property defines the amount of Gaussian blur to apply to an element such as: blur, brightness, contrast, greyscale.
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.
Click dot(s) to reset.
The Brightness property defines the amount of colour brightness to apply to an element.
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.
Click dot(s) to reset.
The Contrast property defines the amount of colour contrast effect to apply to an element.
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.
Click dot(s) to reset.
The Grayscale property defines the amount of grayscale effect to apply to an element.
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.
Click dot(s) to reset.
The Hue Rotate property takes the colour wheel and spins it the number of degrees you specify, changing every colour accordingly.
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.
Click dot(s) to reset.
The Invert property reverses the colours of the element.
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.
Click dot(s) to reset.
The Saturate property defines the intensity of the colour. The higher the percentage, the more vivid the colour.
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.
Click dot(s) to reset.
The Sepia property defines the amount of sepia colour to apply to an element.
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.
Click dot(s) to reset.
