blur()
The blur()
function applies a Gaussian blur to the input image. The value of radius
defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. The initial value for interpolation is 0
. The parameter is specified as a CSS length, but does not accept percentage values.
<svg style="position: absolute; top: 99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgBlur" x="5%" y="5%" width="110%" height="110%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</svg>
brightness()
The brightness()
function applies a linear multiplier to the input image, making it appear more or less bright. A value of 0%
will create an image that is completely black. A value of 100%
leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100%
are allowed, providing brighter results. The initial value for interpolation is 1
.
<svg style="position: absolute; top: 99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]"/>
<feFuncG type="linear" slope="[amount]"/>
<feFuncB type="linear" slope="[amount]"/>
</feComponentTransfer>
</filter>
</svg>
contrast()
The contrast()
function adjusts the contrast of the input image. A value of 0%
will create an image that is completely gray. A value of 100%
leaves the input unchanged. Values of an amount over 100%
are allowed, providing results with more contrast. The initial value for interpolation is 1
.
<svg style="position: absolute; top: 99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]" intercept="(0.5 * [amount]) + 0.5"/>
<feFuncG type="linear" slope="[amount]" intercept="(0.5 * [amount]) + 0.5"/>
<feFuncB type="linear" slope="[amount]" intercept="(0.5 * [amount]) + 0.5"/>
</feComponentTransfer>
</filter>
</svg>
dropshadow()
The dropshadow()
function applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type <shadow>
(defined in CSS Backgrounds and Borders Module Level 3), with the exception that the inset
keyword and spread
parameter are not allowed. This function is similar to the more established boxshadow
property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <shadow>
parameter are as follows:

<offsetx>
<offsety>
(required) 
These are two <length>
values to set the shadow offset. <offsetx>
specifies the horizontal distance. Negative values place the shadow to the left of the element. <offsety>
specifies the vertical distance. Negative values place the shadow above the element. See <length>
for possible units. If both values are 0
, the shadow is placed behind the element (and may generate a blur effect if <blurradius>
and/or <spreadradius>
is set).

<blurradius>
(optional) 
This is a third <length>
value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0
(the shadow's edge is sharp).

<color>
(optional) 
See <color>
values for possible keywords and notations. If not specified, the color used depends on the browser  it is usually the value of the <color>
property, but note that Safari currently paints a transparent shadow in this case.
filter: dropshadow(16px 16px 10px black)
<svg style="position: absolute; top: 999999px" xmlns="http://www.w3.org/2000/svg">
<filter id="dropshadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
<feOffset dx="[offsetx]" dy="[offsety]" result="offsetblur"/>
<feFlood floodcolor="[color]"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
grayscale()
The grayscale()
function converts the input image to grayscale. The value of amount
defines the proportion of the conversion. A value of 100%
is completely grayscale. A value of 0%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. The initial value for interpolation is 0
.
huerotate()
The huerotate()
function applies a hue rotation on the input image. The value of angle
defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg
leaves the input unchanged. The initial value for interpolation is 0
. Though there is no maximum value; the effect of values above 360deg
wraps around.
filter: huerotate(90deg)
<svg style="position: absolute; top: 999999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgHueRotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>
</svg>
invert()
The invert()
function inverts the samples in the input image. The value of amount
defines the proportion of the conversion. A value of 100%
is completely inverted. A value of 0%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. The initial value for interpolation is 0
.
opacity()
The opacity()
function applies transparency to the samples in the input image. The value of amount
defines the proportion of the conversion. A value of 0%
is completely transparent. A value of 100%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. The initial value for interpolation is 1
. This function is similar to the more established opacity
property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
saturate()
The saturate()
function saturates the input image. The value of amount
defines the proportion of the conversion. A value of 0%
is completely unsaturated. A value of 100%
leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100%
are allowed, providing supersaturated results. The initial value for interpolation is 1
.
sepia()
The sepia()
function converts the input image to sepia. The value of amount
defines the proportion of the conversion. A value of 100%
is completely sepia. A value of 0%
leaves the input unchanged. Values between 0%
and 100%
are linear multipliers on the effect. The initial value for interpolation is 0
.