This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Applies a saturation effect to an element’s color, making it appear more or less vivid, for use by the filter property. A decimal value of 1 or percentage of 100% keeps the image as is, while increasing the amount produces more dramatically stratified hues.

This CSS property value is reflected in the following image:

filter: saturate(1000%);
filter: saturate(10); /* same */



The following example shows the difference between two images, where one has a saturation of 1000%:

filter saturate.png

<!DOCTYPE html>
    <title>Filter example</title>
      .foo {
        float: left;

      .bar {
        -webkit-filter: saturate(1000%);
    <img src="/logo/wplogo_transparent_xlg.png" class="foo" />
    <img src="/logo/wplogo_transparent_xlg.png" class="foo bar" />

View live example


The CSS filter corresponds to this SVG filter definition, based on a variable amount passed to the function:

<filter id="saturate">
  <feColorMatrix type="saturate" values="(1 - [amount])"/>

Related specifications

Filter Effects 1.0
Editor’s Draft
Filter Effects 1.0
Working Draft

See also

Related articles


External resources