Backdrop Blur ​
Utilities for controlling the backdrop blur effect of an element.
| Class Name | CSS Equivalent |
|---|---|
| backdrop-blur-none | --cds-sys-filter-backdrop-blur: 0; |
| backdrop-blur-3xs | --cds-sys-filter-backdrop-blur: 1px; |
| backdrop-blur-2xs | --cds-sys-filter-backdrop-blur: 2px; |
| backdrop-blur-xs | --cds-sys-filter-backdrop-blur: 4px; |
| backdrop-blur-s | --cds-sys-filter-backdrop-blur: 8px; |
| backdrop-blur-m | --cds-sys-filter-backdrop-blur: 12px; |
| backdrop-blur-l | --cds-sys-filter-backdrop-blur: 16px; |
| backdrop-blur-xl | --cds-sys-filter-backdrop-blur: 24px; |
| backdrop-blur-2xl | --cds-sys-filter-backdrop-blur: 32px; |
| backdrop-blur-3xl | --cds-sys-filter-backdrop-blur: 64px; |
Setting the backdrop blur filter ​
Control the backdrop blur effect on an element using the backdrop-blur-{amount} utilities.
html
<div class="text-center relative">
<img class="w-3xs h-3xs " src="..." />
<div class="[...] backdrop-filter backdrop-blur-3xl surface bg-opacity-low">backdrop-blur-3xl</div>
</div>âť— Keep in mind
To establish filters like backdrop blur, 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, var(--cds-sys-filter-blur-none))) brightness(var(--cds-sys-filter-backdrop-brightness, 100%)) contrast(var(--cds-sys-filter-backdrop-contrast, 100%)) grayscale(var(--cds-sys-filter-backdrop-grayscale, 0%)) hue-rotate(var(--cds-sys-filter-backdrop-hue-rotate, 0deg)) saturate(var(--cds-sys-filter-backdrop-saturate, 100%)) sepia(var(--cds-sys-filter-backdrop-sepia, 0%));Subsequently, varying backdrop blur effects can be implemented by assigning classes as outlined on this page.