Filters
Filters allow the user to manage visual effects that can be applied to an element and its child elements. They are very useful to create effects when changing the state of an element. For example, when hovering the mouse cursor on an image the latter may become blurred or change its brightness.
You can apply the following types of filters:
- Blur
- Brightness
- Saturate
- Grayscale
- Invert
- Sepia
- Hue-rotate
To add a filter to an element:
- Select an element on the Canvas or the Layers tab in the left panel
- Find the Effects section on the Styles tab in the right panel and click on “+” to the right of the Filters option:
By default, the Blur filter will be added. You can change the filter type by clicking on its name.
You can apply a filter directly to an image, or add it to an element with child elements. You can apply multiple filters to an element. You can toggle the visibility of each filter or drag each of the layers to change their order.
To smooth filter effects when changing the states add a transition.
Blur
This filter blurs the content of an element. The blur radius is set in pixels (px). Larger blur radius values increase blurring. A value of 0 has no effect.
Brightness
This filter sets the brightness in the range from 0 to 200%. A value of 100% will return the element to its original brightness.
Saturate
This filter sets the color intensity. The value can be set in the range from 0% to 200%. A value of 100% will return the image to its original saturation.
Grayscale
This filter converts all colors to grayscale. A value of 0% will show the original image, while a value of 100% will make the image completely grayscale.
Invert
This filter inverts all colors in an element. A value of 0% will show the original image, while 100% will completely invert its colors.
Sepia
This filter gives an image a vintage yellowish tint. A value of 0% will show the original image, while 100% makes it fully sepia.
Hue-rotate
This filter changes the color/hue of an image or element. It is measured in degrees. A value of 0 or 360 returns the image to its original hue. You can change the hue in one of the following ways: by moving the dot on the hue dial, or by entering a value in degrees in the input field.
When applying filters to different states of an element, it is recommended to add the Transition effect so that to make the interaction smooth. For example, if you add a filter to an element in the hover state, there will be a sharp toggle effect on hovering the element. You can add Transition to make the filter effect work smoothly. This can be done in the Effects section by clicking “+” next to the Transitions options.
