sepia() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The sepia() CSS function is used to apply a sepia filter effect to an element, giving images or other visual content a warm, brownish tone reminiscent of old photographs. It is part of the broader filter family of CSS functions, which can be used to apply graphical effects like blur, brightness, contrast, and more to elements such as img or videos.

When sepia() is applied, it transforms the colors of the element by reducing the intensity of colors and overlaying a brown tint. The function accepts a value between 0 and 1, where 0 means no sepia effect (the original colors are preserved) and 1 applies the full sepia effect. Intermediate values like 0.5 create a partial effect, blending the original colors with the sepia tone.

For example, you could apply a sepia effect to an image using the filter property:

img {
  filter: sepia(0.8);
}

This would give the image a strong sepia tone, creating a vintage or nostalgic look. You can also combine sepia() with other filter functions, such as blur() or contrast(), to create more complex visual effects.

A practical example is to apply a mild sepia tone on hover to create an interactive effect:

img:hover {
  filter: sepia(0.3);
  transition: filter 0.3s ease-in-out;
}

This makes the element gradually shift to a subtle sepia tone when the user hovers over it, enhancing the visual experience without fully altering the original image colors.

Syntax

sepia() = filter: sepia(<number>);

Values

<number>A value of 0% or 0 leaves the image unchanged. A value of 100% or 1 completely turns the image into sepia. Any values from 0% to 100% or from 0 to 1 linearly apply the effect.
A negative value is not allowed. An empty value is taken as 0.

Example

HTML

<div class="container">

  <div class="image-box">

    <p>Original</p>

    <img src="https://picsum.photos/id/10/300/200" alt="Landscape">

  </div>



  <div class="image-box">

    <p>Sepia (100%)</p>

    <img class="sepia-effect" src="https://picsum.photos/id/10/300/200" alt="Landscape">

  </div>

</div>

CSS

/* The specific filter class */

.sepia-effect {

  filter: sepia(100%);

}



/* Layout styling */

.container {

  display: flex;

  gap: 20px;

  font-family: sans-serif;

  text-align: center;

}



.image-box img {

  border-radius: 8px;

  display: block;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS sepia() function. Hover over a browser icon to see the version that first introduced support for this CSS function.