Filters
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.
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.
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.
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.
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.
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.
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.
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.
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.
Reset
Click dot(s) to reset.
Last updated
