Grayscale

Demo Info

Demo Information

4basic

Learn how backdrop-filter grayscale converts the background behind an element to grayscale.

backdrop-filter: grayscale(1.0);
/* Values: 0 (no effect) to 1 (fully grayscale) */
/* Converts the background to grayscale */

Grayscale Backdrop Filter

50% grayscale

Partially desaturated background

100% grayscale

Completely desaturated background

Subtle grayscale

Slight desaturation effect

Heavy grayscale

Mostly desaturated background