CSS sepia() Function
sepia() function to apply a sepia filter to an image.
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.
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.
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:
Here's an example using a number:
The official syntax of the
sepia() function is as follows:
sepia() = sepia( [ <number> | <percentage> ] )
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
100% apply linear multipliers on the effect.
A sepia value over
100% is allowed, however, user agents will clamp the value to
A number value of
0.5 has the same effect as the percentage value
50%. A value of
1 is the same as
Negative values are not allowed.
The following table provided by Caniuse.com shows the level of browser support for this feature.