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.