Grayscale

Set the grayscale filter for an element.

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

fgr:0

filter: grayscale(0%);

fgr:10

filter: grayscale(10%);

fgr:20

filter: grayscale(20%);

fgr:30

filter: grayscale(30%);

fgr:40

filter: grayscale(40%);

fgr:50

filter: grayscale(50%);

fgr:60

filter: grayscale(60%);

fgr:70

filter: grayscale(70%);

fgr:80

filter: grayscale(80%);

fgr:90

filter: grayscale(90%);

fgr:100

filter: grayscale();

Prefix a class with a breakpoint to apply it from that width up.

Prefix a class with a state to apply it only while that state matches.