CSS contrast() Function

Use the contrast() function to adjust the contrast of an image.

The CSS contrast() function is used with the filter property to adjust the contrast of an image.

The contrast() function requires an argument to be passed to it. This argument determines the contrast level that's applied to the image. The argument can be either a percentage value or a number.

Using Percentages

Here's an example using a percentage value to give the image more contrast:

<style>
  .filtered {
    filter: contrast(140%);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/1s.jpg" alt="Sample image">

Here's an example using a percentage value to give the image less contrast:

<style>
  .filtered {
    filter: contrast(70%);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/1s.jpg" alt="Sample image">

Using Numbers

Here's an example using a number:

<style>
  .filtered {
    filter: contrast(1.8);
  }
</style>

<img src="/pix/samples/13m.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/13m.jpg" alt="Sample image">

Official Syntax

The official syntax of the contrast() function is as follows:

Possible Values

The contrast() function accepts a number or percentage as its argument. This argument determines the contrast level of the image.

A value of 0% results in an image that's completely gray. A value of 100% results in an image that's unchanged. Any amount over 100% produces more contrast.

A number value of 0.5 has the same effect as the percentage value 50%. A value of 1 is the same as 100%.

Negative values are not allowed.

CSS Specifications

The contrast() function is defined in Filter Effects Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.