CSS sepia()

Changes the color of an element to sepia.

Syntax

filter: sepia(<value>);

Copy to clipboard
Copy to clipboard

where a required <value> can be one of the following:

• Number value: 0, 1
• Percentage value: 10%, 50%

Note: Value defaults to 1 or 100% turning the element to sepia. A value of 0 and 0% will leave element unchanged. Negative values as well as values greater than 1 or 100% are not allowed.

Example 1

Set sepia to 100%:

.banner-image {
  filter: sepia(100%);
}

Copy to clipboard
Copy to clipboard

This is the original image:

This is the same image with the sepia filter applied: