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:

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

Using Numbers

Here's an example using a number:

Official Syntax

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

sepia() = sepia( [ <number> | <percentage> ] )

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

Browser Support

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