CSS sepia() Function

Use the sepia() function to apply a sepia filter to an image.

The CSS sepia() function is used with the filter property to convert an image to sepia.

Sepia is a filter that is often available in photography software. A sepia filter produces a type of monochrome image in which the image appears in shades of reddish-brown. This is similar to using grayscale() but with a reddish-brown color tone.

The idea behind sepia filters is that they can make black and white photos look a bit more eye-catching than the basic grayscale version. However, sepia can also be applied to color photos and other images as required.

The CSS sepia() function requires an argument to be passed to it. This argument determines the proportion of the saturation 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 make an image completely sepia:

<style>
  .filtered {
    filter: sepia(100%);
  }
</style>

<img src="/pix/samples/20gs.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/20gs.jpg" alt="Sample image">

Here's an example using a percentage value to make a color photo partially sepia:

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

Using Numbers

Here's an example using a number:

<style>
  .filtered {
    filter: sepia(0.5);
  }
</style>

<img src="/pix/samples/18s.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/18s.jpg" alt="Sample image">

Official Syntax

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

Possible Values

The sepia() function accepts a number or percentage as its argument. This argument determines the proportion of the conversion.

A value of 100% results in an image that's completely sepia. A value of 0% results in an image that's unchanged. Values between 0% and 100% apply linear multipliers on the effect.

A sepia value over 100% is allowed, however, user agents will clamp the value to 1.

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 sepia() 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.