# sepia function

The `sepia` function allows you to turn a background image into sepia - a black and white image with a brown tint. The `0` value means that the image will remain original. The value of `100%` or `1` turns the background completely to sepia. Any number located in this range sets the usage of sepia linearly. A negative value cannot be specified. The default value is `0`.

## Syntax

`selector { filter: sepia(number); }`

## Example

Let's make our image full sepia:

`<div id="elem"></div>` `#elem { filter: sepia(100%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Now let's reduce the sepia usage by `50%`:

`<div id="elem"></div>` `#elem { filter: sepia(50%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

Now let's set the `sepia` function to a value equal to `0`:

`<div id="elem"></div>` `#elem { filter: sepia(0); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## See also

- the `blur` function
  that blurs a background
- the `brightness` function
  that sets a background brightness
- the `contrast` function
  that sets a background contrast
- the `drop-shadow` function
  that sets a background shadow
- the `hue-rotate` function
  that sets a background hue
- the `invert` function
  that inverts background colors
- the `opacity` function
  that sets a background opacity
- the `background` property
  that is a shorthand property for a background
- the `background-image` property
  with that you can set a background image for a block
- the `filter` property
  that sets a background style

← →
↑
en ru