asp.net.ph

Skip Navigation Links

Sepia Filter Effect

CSS Attributes Index   CSS Filters


Renders an input image in sepia mode.

Syntax:
{ filter: sepia(number | percentage) }

Possible Values


number Absolute positive floating-point number or a relative percentage value.

The property is read/write with a default value of 1.

Remarks:

The sepia( ) CSS function renders a visual object as a sepia data type, akin to the antique brown color palette of photographs in the past.

The passed parameter defines the amount of deviation from the element’s default color palette.

A value of 0 or 0% leaves the input unchanged, while a value of 1 or 100% changes the input image completely to sepia.

Values between 0 and 1 or 0% and 100% have linear multipliers on the effect.

Values more than 1 ( or >100% ) are ignored and render as 1 or 100%.

Negative values ( < 0 ) are ignored and render the element unchanged.

Example

Sepia with values between 0 and 1 or between 0% and 100%.

filter: sepia(0)
filter: sepia(.5)
filter: sepia(.75)
 
filter: sepia(30%)
filter: sepia(60%)
filter: sepia(100%)

Sepia with a negative value or with a value more than 1 or more than 100%.

filter: sepia(-10)
filter: sepia(100)
filter: sepia(200%)
See Also

grayscale   hue-rotate   invert   opacity   saturate



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note