With filters, you can apply unique visual effects to any element. They’re also useful for creating interesting changes on hover states.
Here we’ll be covering:
- Adding filters
- Filter types
- Hover effects using filters
You can add filters on an image, background video or any other element. Filters change the appearance of the entire element, including its children.
To add a filter:
- Select the element
- Go to the Styles Panel
- Scroll to the Effects section
- Under filters click on the plus icon
- Choose the filter type
- Adjust the value.
As you adjust filter values, you can see the effect live on the canvas.
You can add multiple filters. All filters you add layer on top of other filters. You can toggle visibility, change the order by dragging each layer, or delete a filter that you don’t need.
You can choose from any of the filter effects available in the Filter Type dropdown:
- Blur - blurs the content of an element. A larger blur radius value will increase the blur level. 0 will have no effect.
- Hue rotation - shifts the colors/hue of an image or element. The value unit is in degrees. A value of 0 or 360 brings it back to the original hue.
- Saturation - defines the intensity of the colors. Value can be between 0% and 200%. A value of 100% will bring it back to the original saturation.
- Brightness - specify the amount of brightness between 0 and 200%. A value of 100% will return the element back to its original brightness.
- Contrast - specify the amount of contrast between 0 and 200%. A value of 100% will return the element back to its original contrast.
- Grayscale - converts all colors to grayscale. 0% will show the original image and 100% will make the image completely grayscale.
- Sepia - gives your image a vintage off-yellow look. 0% represents the original image and 100% is fully sepia.
- Invert - inverts all the colors in the element. A value of 0% will show the original image and 100% will completely invert the colors.
Hover effects using filters
When adding hover effects on elements such as images, you can create unique effects using filters to style and transition between the default state and the hover state.
- Select an element
- An a filter in the Styles Panel, for example grayscale 100%
- Go to the Hover state
- Set the grayscale filter to 0%
- Go back to the none/default state
- Add a transition that applies to the filters property
Learn more about styling the hover state and adding transitions.