Grayscale and sepia
Learn grayscale() and sepia() filters.
grayscale() desaturates
The grayscale() function reduces an element's color saturation. grayscale(0) keeps full color, grayscale(1) goes fully black-and-white, grayscale(0.5) gives a faded mid tone.
This effect brings a wistful mood to portraits and landscapes. It is also the backbone of cards that turn colored on hover: gray by default, color on hover.
sepia() adds warm tones
The sepia() function shifts the element toward warm brown tones. sepia(1) gives an old-photo look, sepia(0.5) a faint amber feel, sepia(0) leaves colors untouched.
You meet it often in nostalgia pages, vintage card themes, and retro buttons. As a default tone on images that turn colored on hover, it works just as well.
Stack the two functions
You can stack grayscale() and sepia() in the same filter declaration. Order matters: writing grayscale(0.6) first and sepia(0.4) second produces an image that is first desaturated, then warmed.
Swap the order and the tones look different; try both arrangements until the look fits.
Exercise Blend the vintage image with two functions
Write a single filter declaration for the .vintage selector. It should hold sepia(0.7) first, then grayscale(0.3), separated by a space.
Show example solution
/* vintage image filter */
.vintage {
filter: sepia(0.7) grayscale(0.3);
}Test yourself
-
What happens if you change the same declaration to grayscale(1)?
img { filter: grayscale(0); }- The image becomes clearly brighter
- The image turns fully black and white
- The image edges become blurry
- The image flips horizontally
Show answer
The image turns fully black and white — Correct. grayscale(1) zeroes out color saturation and gives a black-and-white look.
-
A sepia tone for the vintage image
.vintage { filter: ____; }Show answer
.vintage { filter: sepia(0.7); } -
Match each value to its effect
- grayscale(1)
- Fully black and white
- sepia(1)
- Old-photo look
- grayscale(0)
- Colors stay
- sepia(0)
- Colors unchanged