CSS sepia()

robgmerrill's avatar
robgmerrill's avatar
robgmerrill
Published Jul 13, 2021Updated Dec 10, 2024

Changes the color of an element to sepia.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Career path

    Full-Stack Engineer

    A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

Syntax

filter: sepia(<value>);

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%);
}

This is the original image:

A road through the trees in fall

This is the same image with the sepia filter applied:

Sepia-filtered road through the trees in fall

All contributors

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Career path

    Full-Stack Engineer

    A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours