Grayscale
Applies a grayscale filter to an element.
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>