A filter is a visual effect that can be applied to an element. While most commonly used to manipulate the appearance of images and text, filters can be applied to any kind of element on the page.

If you are applying a filter to an image, note that the original asset in your media library will be unaffected. The filter is only applied to the image as it appears in the context of your website, not to the source image itself.

To open the Filters Panel, click the icon in the right toolbar, select it from the "Window" dropdown, or press <shift>-F on your keyboard.

Each filter has a value that can be set using a dropdown slider, or you can type a value directly into the text input.

Note that if you apply a filter to an element, the filter will also apply to any elements contained within it. So for example, if you place a text element inside an image element and apply a filter to the image, the filter will also be applied to the text.

Opacity

How opaque an element is. 100% is fully opaque, 0% is fully transparent.

Blur

Makes an element more blurry as the pixel values increase.

Grayscale

How much color appears in the element. This can be used to make images render black and white.

Sepia

Converts the element's colors into warm shades of brown, similar to an old photo.

Saturate

How much color appears in the element. A higher saturation corresponds to more color and lower saturation to less.

Hue Rotate

"Rotates" the color around the color wheel. Use this to shift the color palette of the element.

Invert

Converts the colors in your element to their opposites on the color scale.

Brightness

Adjusts where the pixels in the element are in relation to white and black.

Contrast

Adjusts the difference in brightness between the light and dark areas of an element.


Did this answer your question?