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()
imagemodification 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 “nooperation” 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 nonnegative length with units. 
A
stdDeviation
of 0 is equivalent tofilter: none
in transitions.

brightness(relativeamount)
#
Increases or decreases the R, G, and B channels by the same multiplicative factor.
Equivalent to
<feComponentTransfer>
withlinear
functions for<feFuncR>
,<feFuncG>
, and<feFuncB>
.
relativeamount
is either a number or a percentage, and cannot be negative. 
A
relativeamount
of 1 or 100% is equivalent tofilter: 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(relativeamount)
#
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>
.
relativeamount
is either a number or a percentage, and cannot be negative (useinvert()
to reverse light and dark). 
A
relativeamount
of 1 or 100% is equivalent tofilter: none
in transitions. 
Values less than 1 or 100% reduce contrast (0% will be solid gray), while greater values increase contrast.

dropshadow(dx dy blur color)
#
Adds a dropshadow effect to the image, using the alphatransparency outline of the input to determine the shape of the shadow.
Equivalent to
<feDropShadow>
.
dx
anddy
are offset distances, as lengths with units. 
blur
is a nonnegative length with units, which defines the standard deviation of the blur; beware, this is half the amount of blur as the equivalent parameter totextshadow
orboxshadow
. 
color
is any valid CSS color; it’s supposed to be optional and default tocurrentColor
, but initial browser implementations were inconsistent. 
0 blur, 0 offset, and a
transparent
color is equivalent tofilter: none
in transitions.

grayscale(extent)
#
Reduces the saturation of the image, while preserving luminance.
Equivalent to an
<feColorMatrix>
withsaturate
type. Also equivalent to thesaturate()
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 tofilter: none
in transitions.

huerotate(changeinangle)
#
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>
withhueRotate
type.
changeinangle
is an angle with units (deg
,rad
,turn
). 
A
changeinangle
of 0 is equivalent tofilter: none
in transitions.

invert(extent)
#
Inverts the R, G, and B channels separately, creating a photonegative effect and/or a contrast reduction and desaturation.
Equivalent to
<feComponentTransfer>
with alinear
or twovaluetable
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 tofilter: none
in transitions. 
An
extent
between 0 and 1 creates a linear interpolation between the original color and the inverted color; this means anextent
of 0.5 (50%) results in a solid gray color. 
Values between 0 and 0.5 create grayedout (reducedcontrast, reducedsaturation) versions of the original colors; values between 0.5 and 1 create grayedout (reducedcontrast, reducedsaturation) versions of the inverted colors.

opacity(relativeamount)
#
Reduces the opacity (alpha values) by a multiplicative factor. This function may be useful to clean up semitransparent edges before a
dropshadow()
, but it is mostly intended for the imagemodifyingfilter()
function.The
opacity()
function can also be used as a supportswitch: if you need to add a backdrop element for cases when filters aren’t supported (and therefore you can’t rely on desaturation or dropshadow or blurring to guarantee good contrast), you can make that extra backdrop invisible withopacity(0)
when filters are supported. For example, see Taylor Hunt’s post “Filtered background with fallback for legibility”.
relativeamount
is either a number or a percentage, and cannot be negative. 
A
relativeamount
of 1 or 100% is equivalent tofilter: 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(relativeamount)
#
Reduces or increases the saturation of colors, while preserving luminance.
Equivalent to an
<feColorMatrix>
withsaturate
type.
relativeamount
is either a number or a percentage, and cannot be negative. 
A
relativeamount
of 1 or 100% is equivalent tofilter: 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 brownishyellow tint. Values with equal luminance in the original end up with the same final color.
Equivalent to an
<feColorMatrix>
with a specificmatrix
.
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 tofilter: none
in transitions. 
An
extent
between 0 and 1 creates a linear interpolation between the original color and the sepiatoned result color for that luminance level.
