The filter
CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
Included in the CSS standard are several functions that achieve predefined effects. You can also reference an SVG filter with a URL to an SVG filter element.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone
https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Use no filter */
filter: none;
/* Global values */
filter: inherit;
filter: initial;
filter: unset;
With a function, use the following:
filter: <filter-function> [<filter-function>]* | none
For a reference to an SVG <filter>
element, use the following:
filter: url(file.svg#filter-element-id)
Interpolation
If both the beginning and end filters have a function list of the same length without <url>
, each of their filter functions is interpolated according to its specific rules. If they have different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list using their lacuna values, then all filter functions are interpolated according to their specific rules. If one filter is none
, it is replaced with the filter functions list of the other one using the filter function default values, then all filter functions are interpolated according to their specific rules. Otherwise, discrete interpolation is used.
Functions
The filter
property is specified as none
or one or more of the functions listed below. If the parameter for any function is invalid, the function returns none
. Except where noted, the functions that take a value expressed with a percent sign (as in 34%
) also accept the value expressed as decimal (as in 0.34
).
When a single filter
property has two or more functions it's results will be different from when two or more filter
properties are separately applied with the same functions.
SVG filter
url()
Takes an URI pointing to an SVG filter, which may be embedded in an external XML file.
filter: url(resources.svg#c1)
Filter functions
blur()
The blur()
fucntion 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 lacuna value for interpolation is 0
. The parameter is specified as a CSS length, but does not accept percentage values.
filter: blur(5px)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td>
<td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td>
<td>
<div class="svg-container">
<svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="sRGB">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3.5"/>
</filter>
<image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" width="212px" height="161px"/>
</svg>
</div>
</td>
<td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-webkit-filter:blur(5px);
-ms-filter:blur(5px);
filter:blur(5px); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
<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 lacuna value for interpolation is 1
.
filter: brightness(2)
<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>
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td>
<td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB">
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="2"/>
<feFuncG type="linear" slope="2"/>
<feFuncB type="linear" slope="2"/>
</feComponentTransfer>
</filter>
<image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" />
</svg><div></td>
<td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter:brightness(2);
-webkit-filter:brightness(2);
-ms-filter:brightness(2);
filter:brightness(2); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height:100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
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 lacuna value for interpolation is 1
.
filter: contrast(200%)
<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>
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB">
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-0.5"/>
<feFuncG type="linear" slope="2" intercept="-0.5"/>
<feFuncB type="linear" slope="2" intercept="-0.5"/>
</feComponentTransfer>
</filter>
<image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
</svg><div></td>
<td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter:contrast(200%);
-webkit-filter:contrast(200%);
-ms-filter:contrast(200%);
filter:contrast(200%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
drop-shadow()
The drop-shadow()
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 CSS3 Backgrounds), with the exception that the inset
keyword is not allowed. This function is similar to the more established box-shadow
property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <shadow>
parameter are as follows:
<offset-x>
<offset-y>
(required)
- These are two
<length>
values to set the shadow offset. <offset-x>
specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y>
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 <blur-radius>
and/or <spread-radius>
is set).
<blur-radius>
(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: drop-shadow(16px 16px 10px black)
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
<feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
<feFlood flood-color="[color]"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td>
<td>
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB">
<defs>
<image id="MyImage" xlink:href="/files/3714/Test_Form_4.jpeg" width="213px" height="161px"/>
</defs>
<filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="9" dy="9" in="SourceAlpha"/>
<feGaussianBlur stdDeviation="5"/>
</filter>
<use xlink:href="#MyImage" filter="url(#drop-shadow)"/>
<use xlink:href="#MyImage"/>
</svg>
</div>
</td>
<td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td>
</tr>
<tr>
<td><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
<td><img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
<td>
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB">
<defs>
<image id="MyImage2" xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/>
</defs>
<filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="5" dy="5.5" in="SourceAlpha"/>
<feGaussianBlur stdDeviation="2.5"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0.8"/>
</feComponentTransfer>
</filter>
<use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/>
<use xlink:href="#MyImage2"/>
</svg>
</div>
</td>
<td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter: drop-shadow(16px 16px 10px black);
-webkit-filter: drop-shadow(16px 16px 10px black);
-ms-filter: drop-shadow(16px 16px 10px black);
filter: drop-shadow(16px 16px 10px black);
}
#img12 {
width:100%;
height:auto;
-moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
#irregular-shape {
width: 64%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3, #img13 {
width:100%;
height:auto;
}
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 lacuna value for interpolation is 0
.
filter: grayscale(100%)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB">
<filter id="grayscale">
<feColorMatrix type="matrix"
values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
</filter>
<image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
</svg><div></td>
<td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-ms-filter:grayscale(100%);
filter:grayscale(100%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
hue-rotate()
The hue-rotate()
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 lacuna value for interpolation is 0
. Though there is no maximum value; the effect of values above 360deg
wraps around.
filter: hue-rotate(90deg)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB">
<filter id="hue-rotate">
<feColorMatrix type="hueRotate"
values="90"/>
</filter>
<image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
</svg><div></td>
<td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter:hue-rotate(90deg);
-webkit-filter:hue-rotate(90deg);
-ms-filter:hue-rotate(90deg);
filter:hue-rotate(90deg); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgHueRotate" >
<feColorMatrix type="hueRotate" values="[angle]" />
<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 lacuna value for interpolation is 0
.
filter: invert(100%)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB">
<filter id="invert">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>
<image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
</svg><div></td>
<td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter: invert(100%);
-webkit-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
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 lacuna 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.
filter: opacity(50%)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB">
<filter id="opacity">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0.5">
</feComponentTransfer>
</filter>
<image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
</svg><div></td>
<td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter: opacity(50%);
-webkit-filter: opacity(50%);
-ms-filter: opacity(50%);
filter: opacity(50%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
saturate()
The saturate()
function saturates the input image. The value of amount
defines the proportion of the conversion. A value of 0%
is completely un-saturated. A value of 100%
leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100%
are allowed, providing super-saturated results. The lacuna value for interpolation is 1
.
filter: saturate(200%)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB">
<filter id="saturate">
<feColorMatrix type="saturate"
values="2"/>
</filter>
<image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
</svg><div></td>
<td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter: saturate(200%);
-webkit-filter: saturate(200%);
-ms-filter: saturate(200%);
filter: saturate(200%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
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 lacuna value for interpolation is 0
.
filter: sepia(100%)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">SVG Equivalent</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB">
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>
<image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
</svg><div></td>
<td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter: sepia(100%);
-webkit-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
Combining functions
You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image:
filter: contrast(175%) brightness(103%)
<table class="standard-table">
<thead>
<tr>
<th style="text-align: left;" scope="col">Original image</th>
<th style="text-align: left;" scope="col">Live example</th>
<th style="text-align: left;" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter: contrast(175%) brightness(103%);
-webkit-filter: contrast(175%) brightness(103%);
-ms-filter: contrast(175%) brightness(103%);
filter: contrast(175%) brightness(103%);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
none | <filter-function-list>where
<filter-function-list> = [ <filter-function> | <url> ]+
where
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>
where
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )
where
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Examples
Applying filter functions
Examples of using the predefined functions are shown below. See each function for a specific example.
.mydiv {
filter: grayscale(50%);
}
/* Gray all images by 50% and blur by 10px */
img {
filter: grayscale(0.5) blur(10px);
}
Applying SVG filters
Examples of using the URL function with an SVG resource are as follows:
.target {
filter: url(#c1);
}
.mydiv {
filter: url(commonfilters.xml#large-blur);
}
Specifications
Browser compatibility
| Desktop | Mobile |
---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet |
---|
filter | Chrome
Full support
53-
Full support
53
-
Full support
18
- Prefixed Implemented with the vendor prefix: -webkit-
- Notes In Chrome 18 to 19, the
saturate() function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.
| Edge
Full support
12-
Full support
12
-
Full support
12
- Prefixed Implemented with the vendor prefix: -webkit-
| Firefox
Full support
35-
Full support
35
-
Partial support
34
- Disabled From version 34: this feature is behind the
layout.css.filters.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. -
Full support
49
- Prefixed Implemented with the vendor prefix: -webkit-
-
Full support
46
- Prefixed Implemented with the vendor prefix: -webkit-
- Disabled From version 46: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
| IE
No support
No-
No support
No
- Notes Internet Explorer 4 to 9 implemented a non-standard
filter property. The syntax was completely different from this one and is not documented here.
| Opera
Full support
40-
Full support
40
-
Full support
15
- Prefixed Implemented with the vendor prefix: -webkit-
| Safari
Full support
9.1-
Full support
9.1
-
Full support
6
- Prefixed Implemented with the vendor prefix: -webkit-
| WebView Android
Full support
53-
Full support
53
-
Full support
4.4
- Prefixed Implemented with the vendor prefix: -webkit-
| Chrome Android
Full support
53 | Firefox Android
Full support
35-
Full support
35
-
Partial support
34
- Disabled From version 34: this feature is behind the
layout.css.filters.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. -
Full support
49
- Prefixed Implemented with the vendor prefix: -webkit-
-
Full support
46
- Prefixed Implemented with the vendor prefix: -webkit-
- Disabled From version 46: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
| Opera Android
Full support
41-
Full support
41
-
Full support
14
- Prefixed Implemented with the vendor prefix: -webkit-
| Safari iOS
Full support
9.3-
Full support
9.3
-
Full support
6
- Prefixed Implemented with the vendor prefix: -webkit-
| Samsung Internet Android
Full support
6.0 |
---|
On SVG elements | Chrome
No support
No | Edge
No support
No | Firefox
Full support
35 | IE
No support
No | Opera
No support
No | Safari
No support
No | WebView Android
No support
No | Chrome Android
No support
No | Firefox Android
Full support
35 | Opera Android
No support
No | Safari iOS
No support
No | Samsung Internet Android
No support
No |
---|
Legend
-
Full support
- Full support
-
No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also