Grayscale

Utility	Properties
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="https://picsum.photos/300?image=875" />
  </div>
  <div class="d-32 p-r rad-1">
    <img class="d-full f-g-50 of-c rad-1" src="https://picsum.photos/300?image=875" />
  </div>
  <div class="d-32 p-r rad-1">
    <img class="d-full f-g-100 of-c rad-1" src="https://picsum.photos/300?image=875" />
  </div>
</div>

Conditional styles

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

Media modifier

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

<div class="f-g-0 md:f-g-100 ..."></div>

Hover modifier

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

<div class="f-g-0 h:f-g-100 ..."></div>