Grayscale and Sepia

The following two filters have their historical origins in photography: photos were originally black and white or brownish sepia.

Colorless and sepia filters can be used to give your photos an “antique” look.

Colorlessness is assigned using grayscale. Valid values range from 0 to 1, and percentages range from0% to 100%. If the value is set to 0 or 0%, the element will be displayed unchanged.

.effect {
  filter: grayscale(1); /* Full color removal */
  filter: grayscale(50%); /* Removal of half of the colors */
}

Sepia is set using sepia. The valid values are the same as for grayscale.

.effect {
  filter: sepia(1); /* Full sepia effect */
  filter: sepia(25%); /* 25% sepia effect */
}