Invert

Utilities for controlling the invert of an element.

Class Name	CSS Equivalent
invert-0	--cds-sys-filter-invert: 0;
invert-10	--cds-sys-filter-invert: 10%;
invert-20	--cds-sys-filter-invert: 20%;
invert-30	--cds-sys-filter-invert: 30%;
invert-40	--cds-sys-filter-invert: 40%;
invert-50	--cds-sys-filter-invert: 50%;
invert-60	--cds-sys-filter-invert: 60%;
invert-70	--cds-sys-filter-invert: 70%;
invert-80	--cds-sys-filter-invert: 80%;
invert-90	--cds-sys-filter-invert: 90%;
invert-100	--cds-sys-filter-invert: 100%;

Setting the invert filter

Control the invert of an element using the invert-{level} utilities.

invert-10

invert-20

invert-30

invert-40

invert-50

invert-60

invert-70

invert-80

invert-90

invert-100

❗ Keep in mind

To establish filters like invert, it's essential to commence class declarations with filter.

This action defines a default filter for the element.

filter: blur(var(--cds-sys-filter-blur, var(--cds-sys-filter-blur-none))) invert(var(--cds-sys-filter-invert, 100%)) invert(var(--cds-sys-filter-invert, 100%)) drop-shadow(var(--cds-sys-filter-drop-shadow, 0 0 0 #000)) invert(var(--cds-sys-filter-invert, 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 invert effects can be implemented by assigning classes as outlined on this page.