Backdrop Saturate
Utilities for controlling the backdrop saturate effect of an element.
| Class Name | CSS Equivalent |
|---|---|
| backdrop-saturate-0 | --cds-sys-filter-backdrop-saturate: 0; |
| backdrop-saturate-10 | --cds-sys-filter-backdrop-saturate: 10%; |
| backdrop-saturate-20 | --cds-sys-filter-backdrop-saturate: 20%; |
| backdrop-saturate-30 | --cds-sys-filter-backdrop-saturate: 30%; |
| backdrop-saturate-40 | --cds-sys-filter-backdrop-saturate: 40%; |
| backdrop-saturate-50 | --cds-sys-filter-backdrop-saturate: 50%; |
| backdrop-saturate-60 | --cds-sys-filter-backdrop-saturate: 60%; |
| backdrop-saturate-70 | --cds-sys-filter-backdrop-saturate: 70%; |
| backdrop-saturate-80 | --cds-sys-filter-backdrop-saturate: 80%; |
| backdrop-saturate-90 | --cds-sys-filter-backdrop-saturate: 90%; |
| backdrop-saturate-100 | --cds-sys-filter-backdrop-saturate: 100%; |
| backdrop-saturate-110 | --cds-sys-filter-backdrop-saturate: 110%; |
| backdrop-saturate-120 | --cds-sys-filter-backdrop-saturate: 120%; |
| backdrop-saturate-130 | --cds-sys-filter-backdrop-saturate: 130%; |
| backdrop-saturate-140 | --cds-sys-filter-backdrop-saturate: 140%; |
| backdrop-saturate-150 | --cds-sys-filter-backdrop-saturate: 150%; |
| backdrop-saturate-160 | --cds-sys-filter-backdrop-saturate: 160%; |
| backdrop-saturate-170 | --cds-sys-filter-backdrop-saturate: 170%; |
| backdrop-saturate-180 | --cds-sys-filter-backdrop-saturate: 180%; |
| backdrop-saturate-190 | --cds-sys-filter-backdrop-saturate: 190%; |
| backdrop-saturate-200 | --cds-sys-filter-backdrop-saturate: 200%; |
Setting the backdrop saturate filter
Control the backdrop saturate effect on an element using the backdrop-saturate-{level} utilities.
html
<div class="text-center relative">
<img class="w-3xs h-3xs " src="..." />
<div class="[...] backdrop-filter backdrop-saturate-150 surface bg-opacity-low">backdrop-saturate-150</div>
</div>❗ Keep in mind
To establish filters like backdrop saturate, it's essential to commence class declarations with backdrop-filter.
This action defines a default filter for the element.
css
backdrop-filter: blur(var(--cds-sys-filter-backdrop-blur, 0)) saturate(var(--cds-sys-filter-backdrop-saturate, 100%)) contrast(var(--cds-sys-filter-backdrop-contrast, 100%)) drop-shadow(var(--cds-sys-filter-backdrop-drop-shadow, 0 0 0 transparent)) grayscale(var(--cds-sys-filter-backdrop-grayscale, 0%)) hue-rotate(var(--cds-sys-filter-backdrop-hue-rotate, 0deg)) invert(var(--cds-sys-filter-backdrop-invert, 0%)) opacity(var(--cds-sys-filter-backdrop-opacity, 100%)) saturate(var(--cds-sys-filter-backdrop-saturate, 100%)) sepia(var(--cds-sys-filter-backdrop-sepia, 0%));Subsequently, varying backdrop saturate effects can be implemented by assigning classes as outlined on this page.