sepia() CSS Function

Description

The CSS sepia() function is a filter function that converts an image to sepia, giving it a warmer, more yellow/brown appearance. It is often used to give images a vintage or nostalgic look.

The sepia() function takes a single argument, which is a number or percentage value. This value determines the amount of the conversion. A value of 100% results in an image that is completely sepia, while a value of 0% leaves the image unchanged. Values between 0% and 100% apply linear multipliers on the effect.

To use the sepia() function, simply add it to the filter property of the element that you want to apply the effect to. For example, to apply a 50% sepia filter to an image, you would use the following CSS:

img {
  filter: sepia(50%);
}

You can also use the sepia() function in combination with other filter functions to create more complex effects. For example, the following CSS would apply a 50% sepia filter and a 25% blur filter to an image:

img {
  filter: sepia(50%) blur(25%);
}

Here are some examples of how the sepia() function can be used:

• To give old photos a vintage look
• To create a nostalgic atmosphere on a website or blog
• To make an image look more muted or subdued
• To highlight certain elements in an image by making them stand out from the background

The sepia() function is a handy function that can be used to create a variety of different effects. With a little experimentation, you can learn how to use it to create unique and visually appealing images.

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

<img class="sepia" src="images/nature.jpg" alt="Nature Image">

.sepia {

    filter: sepia(100%);

}

Browser Support

The following table will show you the current browser support for the CSS sepia() function.

Desktop
12	53	35	40	9.1

Tablets / Mobile
53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023