Grayscale
Utilities for controlling the grayscale of an element.
| Class Name | CSS Equivalent |
|---|---|
| grayscale-0 | --cds-sys-filter-grayscale: 0; |
| grayscale-10 | --cds-sys-filter-grayscale: 10%; |
| grayscale-20 | --cds-sys-filter-grayscale: 20%; |
| grayscale-30 | --cds-sys-filter-grayscale: 30%; |
| grayscale-40 | --cds-sys-filter-grayscale: 40%; |
| grayscale-50 | --cds-sys-filter-grayscale: 50%; |
| grayscale-60 | --cds-sys-filter-grayscale: 60%; |
| grayscale-70 | --cds-sys-filter-grayscale: 70%; |
| grayscale-80 | --cds-sys-filter-grayscale: 80%; |
| grayscale-90 | --cds-sys-filter-grayscale: 90%; |
| grayscale-100 | --cds-sys-filter-grayscale: 100%; |
Setting the grayscale filter
Control the grayscale of an element using the grayscale-{level} utilities.
❗ Keep in mind
To establish filters like grayscale, it's essential to commence class declarations with filter.
This action defines a default filter for the element.
css
filter: blur(var(--cds-sys-filter-blur, var(--cds-sys-filter-blur-none))) grayscale(var(--cds-sys-filter-grayscale, 100%)) grayscale(var(--cds-sys-filter-grayscale, 100%)) drop-shadow(var(--cds-sys-filter-drop-shadow, 0 0 0 #000)) grayscale(var(--cds-sys-filter-grayscale, 0%)) hue-rotate(var(--cds-sys-filter-hue-rotate, 0deg)) invert(var(--cds-sys-filter-invert, 0%)) saturate(var(--cds-sys-filter-saturate, 100%)) sepia(var(--cds-sys-filter-sepia, 0%));Subsequently, varying grayscale effects can be implemented by assigning classes as outlined on this page.