Shorthand Filter Functions

There are 10 shorthand filter functions defined in the Filter Effects Module.

These functions are used in the filter property, as a list of operations to be applied in a chain, in order from the original element rendering to the final output. They can be combined with url() references to SVG markup filter definitions. They are also intended for the filter() image-modification function (which isn’t yet supported).

As mentioned in the text, browser support is currently different depending on whether you are filtering an SVG graphical element or a CSS layout box.

All of the shorthand filter functions have SVG markup equivalents; see the Filter Effects spec for the exact details. The shorthands always use sRGB color interpolation, and always automatically calculate the filter effects region to avoid clipping.

Most of the functions take a single parameter that defines the extent of the effect. Each function has a “no-operation” parameter value that is used to represent filter: none when caclulating animations or transitions.

The functions are listed in alphabetical order:

blur(stdDeviation)#

Applies a Gaussian blur effect.

Equivalent to <feGaussianBlur>.

stdDeviation is a non-negative length with units.
A stdDeviation of 0 is equivalent to filter: none in transitions.

brightness(relative-amount)#

Increases or decreases the R, G, and B channels by the same multiplicative factor.

Equivalent to <feComponentTransfer> with linear functions for <feFuncR>, <feFuncG>, and <feFuncB>.

relative-amount is either a number or a percentage, and cannot be negative.
A relative-amount of 1 or 100% is equivalent to filter: none in transitions.
Values less than 1 or 100% make the image darker (0% will be solid black), while greater values make it brighter.

contrast(relative-amount)#

Expands or contracts the range of values (that is, the difference between the maximium and minimum values) in the R, G, and B channels by the same multiplicative factor. This means that it increases/decreases color contrast (and therefore saturation), not just overall luminance contrast.

Equivalent to <feComponentTransfer> with (slightly more complicated) linear functions for <feFuncR>, <feFuncG>, and <feFuncB>.

relative-amount is either a number or a percentage, and cannot be negative (use invert() to reverse light and dark).
A relative-amount of 1 or 100% is equivalent to filter: none in transitions.
Values less than 1 or 100% reduce contrast (0% will be solid gray), while greater values increase contrast.

drop-shadow(dx dy blur color)#

Adds a drop-shadow effect to the image, using the alpha-transparency outline of the input to determine the shape of the shadow.

Equivalent to <feDropShadow>.

dx and dy are offset distances, as lengths with units.
blur is a non-negative length with units, which defines the standard deviation of the blur; beware, this is half the amount of blur as the equivalent parameter to text-shadow or box-shadow.
color is any valid CSS color; it’s supposed to be optional and default to currentColor, but initial browser implementations were inconsistent.
0 blur, 0 offset, and a transparent color is equivalent to filter: none in transitions.

grayscale(extent)#

Reduces the saturation of the image, while preserving luminance.

Equivalent to an <feColorMatrix> with saturate type. Also equivalent to the saturate() shorthand filter with the reverse numbers: 0% saturation is 100% grayscale. Use whichever one makes sense to you.

extent is either a number or a percentage, and cannot be negative.
An extent of 1 or 100% (or any value greater than 1 or 100%) converts the image to pure grayscale.
An extent of 0 is equivalent to filter: none in transitions.

hue-rotate(change-in-angle)#

Modifies the hues of colors in the image by rotating them around the color wheel, while preserving luminance. Because of the luminance correction, this is not the same as simply changing the h factor in hsl() color notation.

Equivalent to an <feColorMatrix> with hueRotate type.

change-in-angle is an angle with units (deg, rad, turn).
A change-in-angle of 0 is equivalent to filter: none in transitions.

invert(extent)#

Inverts the R, G, and B channels separately, creating a photo-negative effect and/or a contrast reduction and desaturation.

Equivalent to <feComponentTransfer> with a linear or two-value table function for <feFuncR>, <feFuncG>, and <feFuncB>.

extent is either a number or a percentage, and cannot be negative.
An extent of 1 or 100% (or any value greater than 1 or 100%) completely inverts the colors.
An extent of 0 is equivalent to filter: none in transitions.
An extent between 0 and 1 creates a linear interpolation between the original color and the inverted color; this means an extent of 0.5 (50%) results in a solid gray color.
Values between 0 and 0.5 create grayed-out (reduced-contrast, reduced-saturation) versions of the original colors; values between 0.5 and 1 create grayed-out (reduced-contrast, reduced-saturation) versions of the inverted colors.

opacity(relative-amount)#

Reduces the opacity (alpha values) by a multiplicative factor. This function may be useful to clean up semi-transparent edges before a drop-shadow(), but it is mostly intended for the image-modifying filter() function.

The opacity() function can also be used as a support-switch: if you need to add a backdrop element for cases when filters aren’t supported (and therefore you can’t rely on desaturation or drop-shadow or blurring to guarantee good contrast), you can make that extra backdrop invisible with opacity(0) when filters are supported. For example, see Taylor Hunt’s post “Filtered background with fallback for legibility”.

relative-amount is either a number or a percentage, and cannot be negative.
A relative-amount of 1 or 100% is equivalent to filter: none in transitions.
As currently defined in the specs, values greater than 1 or 100% don’t have an effect, so it can only be used to reduce opacity, not increase it (which is a shame).

saturate(relative-amount)#

Reduces or increases the saturation of colors, while preserving luminance.

Equivalent to an <feColorMatrix> with saturate type.

relative-amount is either a number or a percentage, and cannot be negative.
A relative-amount of 1 or 100% is equivalent to filter: none in transitions.
Values less than 1 or 100% reduce saturation (0% will be complete grayscale), while greater values increase saturation.

sepia(extent)#

Converts an image to grayscale, then applies a brownish-yellow tint. Values with equal luminance in the original end up with the same final color.

Equivalent to an <feColorMatrix> with a specific matrix.

extent is either a number or a percentage, and cannot be negative.
An extent of 1 or 100% (or any value greater than 1 or 100%) converts the image to a pure duotone sepia image.
An extent of 0 is equivalent to filter: none in transitions.
An extent between 0 and 1 creates a linear interpolation between the original color and the sepia-toned result color for that luminance level.