Edit CSS filters

CSS filter properties in the Rules view have a circular gray and white swatch next to them:

../../../../_images/click_to_edit_filter.png

Clicking the swatch opens a filter editor:

../../../../_images/css_filter_edit.png

The filter editor lists each of the effects performed by that filter on a separate line. You can edit these lines, remove them individually, or drag the effects to change the order in which they are applied.

You can also add new effects by selecting an effect from the dropdown list at the bottom of the dialog. Once you have selected the effect you want to add, click the plus sign (+) to the right of the dropdown list.

../../../../_images/edit_filter_settings.png

Once you have added an effect, enter the settings you want and then press Enter to update the effect. The change will be apparent as soon as you press Enter.

Saving filter presets

From Firefox 42 onwards, you can also add filters to a list of presets. The list of presets will be preserved between browser sessions, making it easy to apply the settings in the future. You can save the current filter to the preset list:

  1. Click to edit the filter, display the preset list by clicking the icon as shown below.

  2. Type a name for your preset, and then click the plus sign to add it to the list of presets.

../../../../_images/filter_presets.png

You can then apply saved filters to new elements. To apply one of your saved presets, click its name in the list.