filter

  • Revision slug: Web/CSS/filter
  • Revision title: filter
  • Revision id: 452423
  • Created:
  • Creator: emersonveenstra
  • Is current revision? No
  • Comment Typo

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The CSS filter property provides for effects like blurring or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

Included in the CSS standard are several functions that achieve predefined effects. You can also reference a filter specified in SVG with a URL to an SVG filter element.

Note: Older versions (4.0 through 9.0) of the Windows Internet Explorer browser supported a non-standard "filter" that has since been deprecated.
  • {{ Xref_cssinitial() }} none
  • Applies to graphics and container elements
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} as specified
  • {{ Xref_cssanimatable() }} yes

Syntax

With a function, use the following:

filter: <filter-function> [<filter-function>]* | none

For a reference to an SVG {{ SVGElement("filter") }} element, use the following:

filter: url(svg-url#element-id) 

Examples

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);
}

Examples of using the URL function with an SVG resource are shown below.

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

Functions

To use the CSS filter property, you specify a value for one of the following functions. If the value 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).

url()

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

filter: url(resources.svg#c1)

blur()

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. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

filter: blur(5px)
Note: The SVG example show below follows what is suggested in the Editors Draft spec, but does not match the static example. At this date (6/13/2012) I'm not sure if that's a bug in the spec or the static example.
<svg height="0" 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>
Original image Live example (may need to reload) SVG Equivalent Static example
Test_Form_2.jpeg {{ EmbedLiveSample('CSS_blur_example','100%','168px','') }} {{ EmbedLiveSample('SVG_blur_example','100%','180px','') }} Test_Form_2_s.jpg

brightness()

Applies a linear multiplier to 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. If the ‘amount’ parameter is missing, a value of 100% is used.

filter: brightness(0.5)
Note: The SVG example show below does NOT follow what is suggested in the Editors Draft spec, but does not match the static example. At this date (6/13/2012) I'm not sure if that's a bug in the spec or the static example. A value of 1/amount provides a closer match to the example image.
<svg height="0" 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>
Original image Live example SVG equivalent Static example
Test_Form.jpg Test_Form.jpg Test_Form.jpg Test_Form_s.jpg

contrast()

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the ‘amount’ parameter is missing, a value of 100% is used.

filter: contrast(200%)
Note: The SVG example show below follows what is suggested in the Editors Draft spec but does not match the static example. At this date (6/13/2012) I'm not sure if that's a bug in the spec or the static example.
<svg height="0" 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>
Original image Live example SVG equivalent Static example

Test_Form_3.jpeg

Test_Form_3.jpeg

Test_Form_3.jpeg

Test_Form_3_s.jpg

drop-shadow()

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> property are as follows.

<offset-x> <offset-y> (required)
This are two {{ Xref_csslength() }} 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 {{ Xref_csslength() }} 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 {{ Xref_csslength() }} 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).
<spread-radius> (optional)
This is a fourth {{ Xref_csslength() }} value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
<color> (optional)
See {{ Xref_csscolorvalue() }} values for possible keywords and notations.
If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the {{ cssxref("color") }} property is used. On the other hand, WebKit's shadow is transparent and therefore useless if <color> is omitted.
filter: drop-shadow(16px 16px 10px black)
<svg height="0" 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>
Original image Live example (may need to reload) SVG example Static example

Test_Form_4.jpeg

Test_Form_4.jpeg

Test_Form_4.jpeg

Test_Form_4_s.jpg

grayscale()

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. If the ‘amount’ parameter is missing, a value of 100% is used.

filter: grayscale(100%)
Original image Live example Static example

Test_Form_5.jpeg

Test_Form_5.jpeg

Test_Form_5_s.jpg

hue-rotate()

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. If the ‘angle’ parameter is missing, a value of 0deg is used. Maximum value is 360deg.

filter: hue-rotate(90deg)
Original image Live example Static example

Test_Form_6.jpeg

Test_Form_6.jpeg

Test_Form_6_s.jpg

invert()

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. If the ‘amount’ parameter is missing, a value of 100% is used.

filter: invert(100%)
Original image Live example Static example

Test_Form_7.jpeg

Test_Form_7.jpeg

Test_Form_7_s.jpg

opacity()

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. If the ‘amount’ parameter is missing, a value of 100% is used. 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%)
Original image Live example Static example

Test_Form_14.jpeg

Test_Form_14.jpeg

Test_Form_14_s.jpg

saturate()

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. If the ‘amount’ parameter is missing, a value of 100% is used. Note: Chrome v19 implements the standard without the percentage sign (%) - the live example below is actually rendered as 'filter: saturate(3)'. This bug is fixed in Chrome v20.

filter: saturate(3%)
Original image Live example Static example

Test_Form_9.jpeg

Test_Form_9.jpeg

Test_Form_9_s.jpg

sepia()

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. If the ‘amount’ parameter is missing, a value of 100% is used.

filter: sepia(100%)
Original image Live example Static example

Test_Form_12.jpeg

Test_Form_12.jpeg

Test_Form_12_s.jpg

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(3%)
Original image Live example Static example

Test_Form_8.jpeg

Test_Form_8.jpeg

Test_Form_8_s.jpg

Specifications

Specification Status Comment
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }} {{ Spec2('Filters 1.0') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 18.0{{ property_prefix("-webkit") }} {{ CompatNo() }}
 (see note)
{{ CompatNo() }} (see note) {{ CompatNo() }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

{{ CompatUnknown() }}

Gecko notes

Gecko currently only implements the {{ anch("url()") }} form of the filter property.

Internet Explorer notes

Internet Explorer 4.0 to 9.0 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.

See also

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The CSS <code>filter</code> property provides for effects like blurring or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.</p>
<p>Included in the CSS standard are several functions that achieve predefined effects. You can also&nbsp;reference a filter specified in SVG with a URL to an&nbsp;<a href="/en/SVG/Element/filter" title="/en/SVG/Element/filter">SVG filter element</a>.</p>
<div class="note">
  <strong>Note:</strong> Older versions (4.0 through 9.0) of the Windows Internet Explorer browser supported a non-standard <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a> that has since been deprecated.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>none</code></li>
  <li><dfn>Applies to</dfn> graphics and container elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> as specified</li>
  <li><dfn>{{ Xref_cssanimatable() }}</dfn> yes</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<p>With a function, use the following:</p>
<pre>
filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
</pre>
<p>For a reference to an SVG {{ SVGElement("filter") }} element, use the following:</p>
<pre class="eval">
filter: url(svg-url#element-id) 
</pre>
<h2 id="Examples">Examples</h2>
<p>Examples of using the predefined functions are shown below. See each function for a specific example.</p>
<pre class="brush: css">
.mydiv { filter: grayscale(50%) }

/* gray all images by 50% and blur by 10px */
img {
&nbsp; filter: grayscale(0.5) blur(10px);
}</pre>
<p>Examples of using the URL function with an SVG resource are shown below.</p>
<pre class="brush: css">
.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }
</pre>
<h2 id="Functions">Functions</h2>
<p>To use the CSS <code>filter</code> property, you specify a value for one of the following functions. If the value 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).</p>
<h3 id="url()"><code>url()</code></h3>
<p>The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.</p>
<pre class="brush: css">
filter: url(resources.svg#c1)
</pre>
<h3 id="blur()"><code>blur()</code></h3>
<p>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. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.</p>
<pre class="brush: css">
filter: blur(5px)
</pre>
<div class="note">
  <strong>Note:</strong> The SVG example show below follows what is suggested in the <a class="external" href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#blurEquivalent" title="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#blurEquivalent">Editors Draft spec</a>, but does not match the static example. At this date (6/13/2012) I'm not sure if that's a bug in the spec or the static example.</div>
<pre>
&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
  &lt;/filter&gt;
&lt;/svg&gt;
</pre>
<div id="SVG_blur_example" name="SVG_blue_example" style="display: none;">
  <pre class="brush: html">
&lt;svg&gt;
  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
  &lt;/filter&gt;
  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212" height="161" /&gt;
&lt;/svg&gt;</pre>
</div>
<div id="CSS_blur_example" name="CSS_blur_example" style="display: none;">
  <pre class="brush: html">
&lt;img alt="Test_Form_2.jpeg" src="https://mdn.mozillademos.org/files/3710/Test_Form_2.jpeg" /&gt;</pre>
  <p>CSS</p>
  <pre class="brush: css">
img { -moz-filter:blur(5px); -webkit-filter:blur(5px); -o-filter:blur(5px); -ms-filter:blur(5px); filter: blur(5px); }</pre>
</div>
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example (may need to reload)</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test_Form_2.jpeg" class="internal default" src="/@api/deki/files/6252/=Test_Form_2.jpeg" style="width: 100%;" /></td>
      <td>{{ EmbedLiveSample('CSS_blur_example','100%','168px','') }}</td>
      <td>{{ EmbedLiveSample('SVG_blur_example','100%','180px','') }}</td>
      <td><img alt="Test_Form_2_s.jpg" class="internal default" src="/@api/deki/files/6254/=Test_Form_2_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
<h3 id="brightness()"><code>brightness()</code></h3>
<p>Applies a linear multiplier to 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. If the ‘amount’ parameter is missing, a value of 100% is used.</p>
<pre class="brush: css">
filter: brightness(0.5)</pre>
<div class="note">
  <strong>Note:</strong> The SVG example show below does <strong>NOT</strong> follow what is suggested in the <a class="external" href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#brightnessEquivalent" title="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#brightnessEquivalent">Editors Draft spec</a>, but does not match the static example. At this date (6/13/2012) I'm not sure if that's a bug in the spec or the static example. A value of <code>1/amount</code> provides a closer match to the example image.</div>
<pre>
&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;filter id="brightness"&gt;
    &lt;feComponentTransfer&gt;
        &lt;feFuncR type="linear" slope="[amount]"/&gt;
        &lt;feFuncG type="linear" slope="[amount]"/&gt;
        &lt;feFuncB type="linear" slope="[amount]"/&gt;
    &lt;/feComponentTransfer&gt;
  &lt;/filter&gt;
&lt;/svg&gt;</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test_Form.jpg" class="internal default" src="/@api/deki/files/6248/=Test_Form.jpg" style="width: 100%;" /></td>
      <td><img alt="Test_Form.jpg" class="internal default" src="/@api/deki/files/6248/=Test_Form.jpg" style="width: 100%;" /></td>
      <td><img alt="Test_Form.jpg" class="internal default" src="/@api/deki/files/6248/=Test_Form.jpg" style="width: 100%;" /></td>
      <td><img alt="Test_Form_s.jpg" class="internal default" src="/@api/deki/files/6251/=Test_Form_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
<h3 id="contrast()"><code>contrast()</code></h3>
<p>Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the ‘amount’ parameter is missing, a value of 100% is used.</p>
<pre class="brush: css">
filter: contrast(200%)
</pre>
<div class="note">
  <strong>Note:</strong> The SVG example show below follows what is suggested in the <a class="external" href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#contrastEquivalent" title="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#contrastEquivalent">Editors Draft spec</a> but does not match the static example. At this date (6/13/2012) I'm not sure if that's a bug in the spec or the static example.</div>
<pre>
&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;filter id="contrast"&gt;
    &lt;feComponentTransfer&gt;
      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/&gt;
      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/&gt;
      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/&gt;
    &lt;/feComponentTransfer&gt;
  &lt;/filter&gt;
&lt;/svg&gt;
</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_3.jpeg" class="internal default" src="/@api/deki/files/6255/=Test_Form_3.jpeg" style="width:100%;" /></p>
      </td>
      <td style="-moz-filter:contrast(200%); -webkit-filter:contrast(200%); -o-filter:contrast(200%); -ms-filter:contrast(200%);">
        <p><img alt="Test_Form_3.jpeg" class="internal default" src="/@api/deki/files/6255/=Test_Form_3.jpeg" style="width:100%;" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_3.jpeg" class="internal default" src="/@api/deki/files/6255/=Test_Form_3.jpeg" style="width:100%;" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_3_s.jpg" class="internal default" src="/@api/deki/files/6256/=Test_Form_3_s.jpg" style="width:100%;" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="drop-shadow()"><code>drop-shadow()</code></h3>
<p>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 &lt;shadow&gt; (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed. This function is similar to the more established <a href="/En/CSS/Box-shadow" title="/en/CSS/box-shadow">box-shadow</a>&nbsp;property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the &lt;shadow&gt; property are as follows.</p>
<dl>
  <dt>
    <code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(required)</small></dt>
  <dd>
    This are two {{ Xref_csslength() }} values to set the shadow offset. <code>&lt;offset-x&gt;</code> specifies the horizontal distance. Negative values place the shadow to the left of the element. <code>&lt;offset-y&gt;</code> specifies the vertical distance. Negative values place the shadow above the element. See {{ Xref_csslength() }} for possible units.<br />
    If both values are <code>0</code>, the shadow is placed behind the element (and may generate a blur effect if <code>&lt;blur-radius&gt;</code> and/or <code>&lt;spread-radius&gt;</code> is set).</dd>
  <dt>
    <code>&lt;blur-radius&gt;</code> <small>(optional)</small></dt>
  <dd>
    This is a third {{ Xref_csslength() }} 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 <code>0</code> (the shadow's edge is sharp).</dd>
  <dt>
    <code>&lt;spread-radius&gt;</code> <small>(optional)</small></dt>
  <dd>
    This is a fourth {{ Xref_csslength() }} value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be <code>0</code> (the shadow will be the same size as the element).</dd>
  <dt>
    <code>&lt;color&gt;</code> <small>(optional)</small></dt>
  <dd>
    See {{ Xref_csscolorvalue() }} values for possible keywords and notations.<br />
    If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the {{ cssxref("color") }} property is used. On the other hand, WebKit's shadow is transparent and therefore useless if <code>&lt;color&gt;</code> is omitted.</dd>
</dl>
<pre class="brush: css">
filter: drop-shadow(16px 16px 10px black)</pre>
<pre>
&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;filter id="drop-shadow"&gt;
    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
    &lt;feFlood flood-color="[color]"/&gt;
    &lt;feComposite in2="offsetblur" operator="in"/&gt;
    &lt;feMerge&gt;
      &lt;feMergeNode/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
    &lt;/feMerge&gt;
  &lt;/filter&gt;
&lt;/svg&gt;
</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example (may need to reload)</th>
      <th align="left" scope="col">SVG example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_4.jpeg" class="internal default" src="/@api/deki/files/6257/=Test_Form_4.jpeg" /></p>
      </td>
      <td style="-moz-filter:drop-shadow(16px 16px 20px black); -webkit-filter:drop-shadow(16px 16px 20px black); -o-filter:drop-shadow(16px 16px 20px black); -ms-filter:drop-shadow(16px 16px 20px black);">
        <p><img alt="Test_Form_4.jpeg" class="internal default" src="/@api/deki/files/6257/=Test_Form_4.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_4.jpeg" class="internal default" src="/@api/deki/files/6257/=Test_Form_4.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_4_s.jpg" class="internal default" src="/@api/deki/files/6258/=Test_Form_4_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="grayscale()"><code>grayscale()</code></h3>
<p>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. If the ‘amount’ parameter is missing, a value of 100% is used.</p>
<pre class="brush: css">
filter: grayscale(100%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_5.jpeg" class="internal default" src="/@api/deki/files/6259/=Test_Form_5.jpeg" /></p>
      </td>
      <td style="-moz-filter:grayscale(100%); -webkit-filter:grayscale(100%); -o-filter:grayscale(100%); -ms-filter:grayscale(100%);">
        <p><img alt="Test_Form_5.jpeg" class="internal default" src="/@api/deki/files/6259/=Test_Form_5.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_5_s.jpg" class="internal default" src="/@api/deki/files/6260/=Test_Form_5_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="hue-rotate()"><code>hue-rotate()</code></h3>
<p>Applies a hue rotation on the input image. The value of ‘<code class="property">angle</code>’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘<code class="property">angle</code>’ parameter is missing, a value of 0deg is used. Maximum value is 360deg.</p>
<pre class="brush: css">
filter: hue-rotate(90deg)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_6.jpeg" class="internal default" src="/@api/deki/files/6262/=Test_Form_6.jpeg" /></p>
      </td>
      <td style="-moz-filter:hue-rotate(90deg); -webkit-filter:hue-rotate(90deg); -o-filter:hue-rotate(90deg); -ms-filter:hue-rotate(90deg);">
        <p><img alt="Test_Form_6.jpeg" class="internal default" src="/@api/deki/files/6262/=Test_Form_6.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_6_s.jpg" class="internal default" src="/@api/deki/files/6263/=Test_Form_6_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="invert()"><code>invert()</code></h3>
<p>Inverts the samples in the input image. The value of ‘<code class="property">amount</code>’ 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. If the ‘<code class="property">amount</code>’ parameter is missing, a value of 100% is used.</p>
<pre class="brush: css">
filter: invert(100%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_7.jpeg" class="internal default" src="/@api/deki/files/6264/=Test_Form_7.jpeg" /></p>
      </td>
      <td style="-moz-filter:invert(100%); -webkit-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%);">
        <p><img alt="Test_Form_7.jpeg" class="internal default" src="/@api/deki/files/6264/=Test_Form_7.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_7_s.jpg" class="internal default" src="/@api/deki/files/6265/=Test_Form_7_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="opacity()"><code>opacity()</code></h3>
<p>Applies transparency to the samples in the input image. The value of ‘<code class="property">amount</code>’ 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. If the ‘<code class="property">amount</code>’ parameter is missing, a value of 100% is used.&nbsp;This function is similar to the more established <a href="/en/CSS/opacity" title="/en/CSS/opacity">opacity</a>&nbsp;property; the difference is that with filters, some browsers provide hardware acceleration for better performance.</p>
<pre class="brush: css">
filter: opacity(50%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_14.jpeg" class="internal default" src="/@api/deki/files/6270/=Test_Form_14.jpeg" /></p>
      </td>
      <td style="-moz-filter:opacity(50%); -webkit-filter:opacity(50%); -o-filter:opacity(50%); -ms-filter:opacity(50%);">
        <p><img alt="Test_Form_14.jpeg" class="internal default" src="/@api/deki/files/6270/=Test_Form_14.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_14_s.jpg" class="internal default" src="/@api/deki/files/6271/=Test_Form_14_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="saturate()"><code>saturate()</code></h3>
<p>Saturates the input image. The value of ‘<code class="property">amount</code>’ 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. If the ‘<code class="property">amount</code>’ parameter is missing, a value of 100% is used. Note: Chrome v19 implements the standard without the percentage sign (%) - the live example below is actually rendered as '<code>filter: saturate(3)'</code>. This bug is fixed in Chrome v20.</p>
<pre class="brush: css">
filter: saturate(3%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_9.jpeg" class="internal default" src="/@api/deki/files/6266/=Test_Form_9.jpeg" /></p>
      </td>
      <td style="-moz-filter:saturate(3); -webkit-filter:saturate(3); -o-filter:saturate(3); -ms-filter:saturate(3);">
        <p><img alt="Test_Form_9.jpeg" class="internal default" src="/@api/deki/files/6266/=Test_Form_9.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_9_s.jpg" class="internal default" src="/@api/deki/files/6269/=Test_Form_9_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="sepia()"><code>sepia()</code></h3>
<p>Converts the input image to sepia. The value of ‘<code class="property">amount</code>’ 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. If the ‘<code class="property">amount</code>’ parameter is missing, a value of 100% is used.</p>
<pre class="brush: css">
filter: sepia(100%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_12.jpeg" class="internal default" src="/@api/deki/files/6272/=Test_Form_12.jpeg" /></p>
      </td>
      <td style="-moz-filter:sepia(100%); -webkit-filter:sepia(100%); -o-filter:sepia(100%); -ms-filter:sepia(100%);">
        <p><img alt="Test_Form_12.jpeg" class="internal default" src="/@api/deki/files/6272/=Test_Form_12.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_12_s.jpg" class="internal default" src="/@api/deki/files/6273/=Test_Form_12_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="Combining_functions">Combining functions</h2>
<p>You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.</p>
<pre class="brush: css">
filter: contrast(175%) brightness(3%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_8.jpeg" class="internal default" src="/@api/deki/files/6274/=Test_Form_8.jpeg" /></p>
      </td>
      <td style="-moz-filter:contrast(175%) brightness(3%); -webkit-filter:contrast(175%) brightness(3%); -o-filter:contrast(175%) brightness(3%); -ms-filter:contrast(175%) brightness(3%);">
        <p><img alt="Test_Form_8.jpeg" class="internal default" src="/@api/deki/files/6274/=Test_Form_8.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_8_s.jpg" class="internal default" src="/@api/deki/files/6275/=Test_Form_8_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}</td>
      <td>{{ Spec2('Filters 1.0') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>18.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatNo() }}<br />
          &nbsp;(see <a href="/en/CSS/filter#Gecko_notes" title="en/CSS/filter#Gecko_notes">note</a>)</td>
        <td>{{ CompatNo() }} (see <a href="/en/CSS/filter#Internet_explorer_notes" title="en/CSS/filter#Internet_explorer_notes">note</a>)</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>
          <p>{{ CompatUnknown() }}</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<p>Gecko currently only implements the <code>{{ anch("url()") }}</code> form of the <code>filter</code> property.</p>
<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
<p>Internet Explorer 4.0 to 9.0 implemented a non-standard <code>filter</code> property. The syntax was completely different from this one and is not documented here.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li><a class="internal" href="/en-US/docs/Applying_SVG_effects_to_HTML_content" title="En/Applying SVG effects to HTML content">Applying SVG effects to HTML content</a></li>
  <li>The {{ Cssxref("mask") }} property</li>
  <li><a class="internal" href="/en-US/docs/SVG" title="En/SVG">SVG</a></li>
  <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/" title="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li>
  <li><a class="external" href="http://techstream.org/Web-Design/CSS3-Image-Filters" title="CSS filters">CSS filters</a> Tech Stream article</li>
</ul>
Revert to this revision