Grayscale

Set the grayscale filter for an element.

Widely available

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();

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:fgr-(value)
Small≥640px
md:fgr-(value)
Medium≥768px
lg:fgr-(value)
Large≥1024px
xxl:fgr-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:fgr-(value)