CSS sepia() Function

CSS sepia() Function

The CSS sepia() function applies a warm, brownish-yellow color effect to an image or element.

It is used with the filter and backdrop-filter properties and accepts an optional number or percentage that controls the strength of the effect. It is commonly used to create vintage-style photographs, muted graphics, and animated color transitions without modifying the original image file.

Syntax

filter: sepia(amount);

The amount parameter is optional and specifies how strongly the sepia effect is applied.

For example:

filter: sepia();
filter: sepia(0);
filter: sepia(0.25);
filter: sepia(0.5);
filter: sepia(1);
filter: sepia(25%);
filter: sepia(50%);
filter: sepia(100%);

A value of 0 leaves the original colors unchanged. A value of 1 applies the full sepia effect.

When the parameter is omitted, the function uses 1, equivalent to 100%.

For example:

.photo {
  filter: sepia(75%);
}

This applies 75% of the full sepia conversion to the image.

The function returns a CSS <filter-function> value.

Parameters

The sepia() function accepts one optional parameter.

The parameter accepts the following CSS data types:

• <number> - A unitless numeric value, such as 0.5 or 1.
• <percentage> - A percentage value, such as 50% or 100%.

Negative values are invalid. Values greater than 1 or 100% are valid but are limited to the full sepia effect when rendered.

For example:

filter: sepia(1.5);
filter: sepia(150%);

Both declarations produce the same visible effect as sepia(1).

The default parameter value is different from the value used to represent an unchanged image during animation interpolation. The omitted parameter produces full sepia, while the no-effect interpolation value is 0.

How It Works

The sepia() function changes the rendered colors of an element by applying a sepia color transformation.

Sepia tones are commonly associated with older photographs because they emphasize warm browns, yellows, and muted colors.

For example:

.photo {
  filter: sepia(1);
}

This applies the full sepia conversion to the image.

A lower value produces a subtler result:

.photo {
  filter: sepia(0.4);
}

This applies 40% of the full sepia effect, preserving more of the original color appearance.

The filter changes the rendered appearance rather than the underlying image file. Removing the filter restores the original colors.

The function does not change the element's width, height, or position in the document layout.

It also does not add texture, scratches, fading, or other photographic aging effects. Those effects require additional styling or image processing.

Sepia Values

The sepia amount controls how much of the conversion is applied.

For example:

.original {
  filter: sepia(0);
}
.subtle {
  filter: sepia(0.25);
}
.medium {
  filter: sepia(0.5);
}
.full {
  filter: sepia(1);
}

The same image can display different amounts of warm color conversion without requiring separate image files.

Because the effect depends on the original colors, sepia may look different on photographs, illustrations, logos, and other graphics.

Numbers and Percentages

The sepia() function accepts both unitless numbers and percentages.

These declarations are equivalent:

filter: sepia(0);
filter: sepia(0%);

Both leave the original colors unchanged.

These declarations are also equivalent:

filter: sepia(0.5);
filter: sepia(50%);

Both apply half of the full sepia conversion.

The following declarations apply the maximum effect:

filter: sepia(1);
filter: sepia(100%);
filter: sepia();

Values above the maximum are accepted but do not increase the visible effect:

filter: sepia(2);
filter: sepia(200%);

Both produce the same visible sepia conversion as sepia(1).

Percentages can be easier to read when describing the strength of a filter, while numbers are convenient for calculations and animations.

Applying Sepia to Elements

The sepia() function can be applied to more than photographs.

Images

img {
  filter: sepia(75%);
}

This adds a warm sepia appearance to images.

Backgrounds and Containers

.card {
  filter: sepia(50%);
}

This applies the effect to the rendered card, including its background, text, borders, and contents.

To apply sepia only to a background image, place that image in a separate element or pseudo-element and apply the filter to that layer.

Icons and Graphics

.icon {
  filter: sepia(100%);
}

This can give an icon or graphic a warmer color appearance.

Backdrop Filtering

.overlay {
  backdrop-filter: sepia(75%);
}

The backdrop-filter property applies the effect to the backdrop behind the element rather than directly recoloring the element's own contents.

A transparent or partially transparent background is generally needed to see the filtered backdrop.

Combining Filter Functions

The sepia() function can be combined with other filter functions in a single declaration.

Sepia and Contrast

.photo {
  filter: sepia(75%) contrast(110%);
}

This applies sepia conversion and increases contrast.

Sepia and Brightness

.photo {
  filter: sepia(80%) brightness(110%);
}

This combines warm sepia tones with increased brightness.

Sepia and Saturation

.photo {
  filter: sepia(70%) saturate(120%);
}

This applies sepia and increases the saturation of the resulting colors.

Sepia and Grayscale

.photo {
  filter: grayscale(50%) sepia(80%);
}

This partially removes the original colors before applying the sepia conversion.

Multiple Filters

.vintage-photo {
  filter: sepia(85%) contrast(105%) brightness(95%);
}

This creates a warmer, slightly darker appearance with a small contrast adjustment.

Filter functions are separated by spaces, not commas, and are applied in the order written.

Filter Order

The order of filter functions can change the final appearance.

For example:

.first {
  filter: sepia(100%) saturate(150%);
}
.second {
  filter: saturate(150%) sepia(100%);
}

The first declaration applies sepia before increasing saturation. The second increases the original saturation before applying sepia.

These operations do not necessarily produce identical colors.

Another example:

.first {
  filter: sepia(75%) brightness(120%);
}
.second {
  filter: brightness(120%) sepia(75%);
}

The results can differ because brightness and sepia are applied in different sequences.

When combining multiple filters, test the result with the actual image or element being styled.

Also remember that separate filter declarations do not accumulate:

.photo {
  filter: sepia(75%);
  filter: contrast(120%);
}

The second declaration replaces the first.

To apply both effects, write:

.photo {
  filter: sepia(75%) contrast(120%);
}

sepia() vs. grayscale()

The sepia() and grayscale() functions both modify image colors, but they produce different results.

For example:

.sepia-photo {
  filter: sepia(100%);
}
.grayscale-photo {
  filter: grayscale(100%);
}

The first image develops warm sepia tones, while the second becomes grayscale.

Both functions preserve the original image file and modify only the rendered appearance.

Example

The following example compares an original graphic with three levels of sepia filtering.

HTML:

<div class="sepia-demo">
  <div class="sepia-item">
    <div class="sepia-art original">
      <span class="sepia-circle"></span>
      <span class="sepia-square"></span>
    </div>
    <p>Original</p>
  </div>
  <div class="sepia-item">
    <div class="sepia-art subtle">
      <span class="sepia-circle"></span>
      <span class="sepia-square"></span>
    </div>
    <p>25% Sepia</p>
  </div>
  <div class="sepia-item">
    <div class="sepia-art medium">
      <span class="sepia-circle"></span>
      <span class="sepia-square"></span>
    </div>
    <p>50% Sepia</p>
  </div>
  <div class="sepia-item">
    <div class="sepia-art full">
      <span class="sepia-circle"></span>
      <span class="sepia-square"></span>
    </div>
    <p>100% Sepia</p>
  </div>
</div>

CSS:

.sepia-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
}
.sepia-item {
  width: 130px;
  text-align: center;
}
.sepia-art {
  position: relative;
  width: 130px;
  height: 100px;
  overflow: hidden;
  background-color: #3498db;
}
.sepia-circle {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #f1c40f;
}
.sepia-square {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
}
.original {
  filter: sepia(0);
}
.subtle {
  filter: sepia(25%);
}
.medium {
  filter: sepia(50%);
}
.full {
  filter: sepia(100%);
}

The first graphic displays its original colors. Each subsequent graphic applies a stronger sepia conversion.

At 100%, the colors take on a noticeably warmer appearance.

The example uses CSS shapes rather than an external image so the comparison works without additional files.

Combined Filter Example

The following example combines sepia with brightness and contrast to create a warmer, vintage-style appearance.

HTML:

<div class="vintage-demo">
  <div class="vintage-item">
    <div class="vintage-art original">
      <span class="vintage-circle"></span>
    </div>
    <p>Original</p>
  </div>
  <div class="vintage-item">
    <div class="vintage-art vintage">
      <span class="vintage-circle"></span>
    </div>
    <p>Vintage Filter</p>
  </div>
</div>

CSS:

.vintage-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  padding: 20px 0;
}
.vintage-item {
  width: 150px;
  text-align: center;
}
.vintage-art {
  position: relative;
  width: 150px;
  height: 110px;
  overflow: hidden;
  background: linear-gradient(135deg, #3498db, #2ecc71);
}
.vintage-circle {
  position: absolute;
  top: 20px;
  left: 45px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e74c3c;
}
.vintage {
  filter: sepia(85%) contrast(110%) brightness(95%);
}

The second graphic uses three filter functions to change its appearance.

The sepia conversion introduces warmer tones, the contrast adjustment increases differences between light and dark areas, and the brightness adjustment slightly darkens the result.

The original graphic remains unchanged.

Backdrop Filter Example

The sepia() function can also be used with backdrop-filter to change the appearance of content behind a partially transparent element.

HTML:

<div class="backdrop-demo">
  <div class="backdrop-panel">
    <p>Sepia Backdrop</p>
  </div>
</div>

CSS:

.backdrop-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background: linear-gradient(135deg, #3498db 0%, #2ecc71 50%, #e74c3c 100%);
}
.backdrop-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: sepia(100%);
}
.backdrop-panel p {
  margin: 0;
  color: #222;
  font-weight: bold;
}

The panel applies a sepia effect to the gradient visible behind it.

The text inside the panel is not directly recolored by the backdrop filter.

Unlike filter, which affects an element's rendered contents, backdrop-filter changes the appearance of the backdrop seen through the element.

Transitions and Animations

The sepia() function can be animated using CSS transitions and keyframe animations.

Hover Transition

The following example starts with a full sepia effect and restores the original colors on hover or keyboard focus.

.photo {
  filter: sepia(100%);
  transition: filter 0.4s ease;
}
.photo:hover,
.photo:focus-visible {
  filter: sepia(0);
}

The filter gradually changes from full sepia to the original colors over 0.4 seconds.

Adding Sepia on Hover

.photo {
  filter: sepia(0);
  transition: filter 0.3s ease;
}
.photo:hover,
.photo:focus-visible {
  filter: sepia(100%);
}

This creates the opposite effect, changing the image from its original colors to full sepia.

Keyframe Animation

@keyframes sepia-pulse {
  0%, 100% {
    filter: sepia(0);
  }
  50% {
    filter: sepia(100%);
  }
}
.animated-photo {
  animation: sepia-pulse 3s ease-in-out infinite;
}

The animation gradually changes the image to sepia and then returns it to its original colors.

Reduced Motion

Respect reduced-motion preferences when using animated filter effects.

@media (prefers-reduced-motion: reduce) {
  .animated-photo {
    animation: none;
  }
  .photo {
    transition: none;
  }
}

This removes the continuous animation and disables the transition for users who request reduced motion.

Common Uses

The sepia() function is useful for applying warm color treatments without modifying source images.

• Vintage photographs: Give modern images a warm, aged appearance.
• Portfolio galleries: Apply consistent color treatments to selected images.
• Hover effects: Transition between sepia and original colors.
• Decorative graphics: Recolor icons, illustrations, and background elements.
• Muted imagery: Reduce the visual intensity of bright original colors.
• Design themes: Apply a consistent warm appearance across multiple images.
• Backdrop effects: Apply sepia to content visible through translucent panels.
• Animated filters: Change color appearance using transitions and keyframes.

For example, a portfolio thumbnail can display a sepia effect until the user interacts with it:

.portfolio-thumbnail {
  filter: sepia(70%);
  transition: filter 0.3s ease;
}
.portfolio-thumbnail:hover,
.portfolio-thumbnail:focus-visible {
  filter: sepia(0);
}

The original image colors return when the thumbnail is hovered or receives keyboard focus.

For keyboard interaction, apply the focus state to a genuinely focusable element, such as a linked thumbnail.

Limitations

The sepia() function has several requirements and behaviors to consider.

• The function accepts zero or one parameter.
• The parameter must be a non-negative number or percentage.
• Omitting the parameter applies the full sepia effect.
• A value of 0 or 0% leaves the original colors unchanged.
• A value of 1 or 100% applies the full sepia effect.
• Values greater than 1 or 100% are valid but are clamped to the maximum effect.
• Negative values are invalid.
• Length units such as px and em are invalid.
• The function changes rendered colors rather than modifying the original image file.
• Applying filter to a container also affects its rendered descendants.
• The function does not change the element's layout dimensions.
• Multiple filter functions must be combined in a single declaration when they are intended to work together.
• The order of combined filter functions can change the final appearance.
• Large filtered regions and animated filters may require additional rendering work.

The following declarations are valid:

filter: sepia();
filter: sepia(0.5);
filter: sepia(75%);
filter: sepia(1.5);

The following declaration is invalid because it uses a negative value:

filter: sepia(-0.5);

The following declaration is invalid because it uses a length:

filter: sepia(50px);

The following declaration is invalid because it supplies two parameters:

filter: sepia(0.5, 0.75);

To remove the effect completely, use either:

filter: sepia(0);

Or:

filter: none;

The second declaration removes all filter functions assigned to the element, not just sepia.

Finally, sepia filtering is a color effect, not a substitute for accessible color contrast. Check the readability of filtered text and interface elements.

Browser Support

The CSS sepia() function has Baseline Widely available browser support. It has been supported across major browsers since September 2016, including Chrome, Edge, Firefox, and Safari.

The function is widely supported in modern desktop and mobile browsers when used with the filter property.

Support for backdrop-filter should be checked separately because that property has its own browser compatibility history.

For current compatibility information, visit Can I Use? for CSS filters.

Specifications

The sepia() function is defined in the Filter Effects Module Level 1 specification.

The specification defines the function's syntax, color conversion behavior, parameter limits, and interpolation rules.

Related filter functions include grayscale(), saturate(), brightness(), contrast(), and hue-rotate().