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

Next lesson: Hue-rotate and saturate

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies