Grayscale

Applies a grayscale filter to an element.

Class	Style
`f-g-0`	`filter: grayscale(0%);`
`f-g-10`	`filter: grayscale(10%);`
`f-g-20`	`filter: grayscale(20%);`
`f-g-30`	`filter: grayscale(30%);`
`f-g-40`	`filter: grayscale(40%);`
`f-g-50`	`filter: grayscale(50%);`
`f-g-60`	`filter: grayscale(60%);`
`f-g-70`	`filter: grayscale(70%);`
`f-g-80`	`filter: grayscale(80%);`
`f-g-90`	`filter: grayscale(90%);`
`f-g-100`	`filter: grayscale(100%);`

This example showcases various grayscale() filter utilities:

The f-g-0 grayscale utility sets the filter property to grayscale(0%), meaning no grayscale is applied, and the colors remain unchanged.
The f-g-50 grayscale utility sets the filter property to grayscale(50%), applying a moderate grayscale effect, resulting in a mix of color and gray.
Finally, f-g-100 grayscale utility sets the filter property to grayscale(100%), completely removing all color and rendering the element in shades of gray.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="d-32 p-r rad-1">
    <img class="d-full f-g-0 of-c rad-1" src="/img/sea.jpg" />
  </div>
  <div class="d-32 p-r rad-1">
    <img class="d-full f-g-50 of-c rad-1" src="/img/sea.jpg" />
  </div>
  <div class="d-32 p-r rad-1">
    <img class="d-full f-g-100 of-c rad-1" src="/img/sea.jpg" />
  </div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:f-g-*, md:f-g-*, lg:f-g-*, and xxl:f-g-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:f-g-* utility to override elements and change their values when hovering over them.