Brightness ​
Utilities for controlling the brightness of an element.
| Class Name | CSS Equivalent |
|---|---|
| brightness-0 | --cds-sys-filter-brightness: 0; |
| brightness-10 | --cds-sys-filter-brightness: 10%; |
| brightness-20 | --cds-sys-filter-brightness: 20%; |
| brightness-30 | --cds-sys-filter-brightness: 30%; |
| brightness-40 | --cds-sys-filter-brightness: 40%; |
| brightness-50 | --cds-sys-filter-brightness: 50%; |
| brightness-60 | --cds-sys-filter-brightness: 60%; |
| brightness-70 | --cds-sys-filter-brightness: 70%; |
| brightness-80 | --cds-sys-filter-brightness: 80%; |
| brightness-90 | --cds-sys-filter-brightness: 90%; |
| brightness-100 | --cds-sys-filter-brightness: 100%; |
| brightness-110 | --cds-sys-filter-brightness: 110%; |
| brightness-120 | --cds-sys-filter-brightness: 120%; |
| brightness-130 | --cds-sys-filter-brightness: 130%; |
| brightness-140 | --cds-sys-filter-brightness: 140%; |
| brightness-150 | --cds-sys-filter-brightness: 150%; |
| brightness-160 | --cds-sys-filter-brightness: 160%; |
| brightness-170 | --cds-sys-filter-brightness: 170%; |
| brightness-180 | --cds-sys-filter-brightness: 180%; |
| brightness-190 | --cds-sys-filter-brightness: 190%; |
| brightness-200 | --cds-sys-filter-brightness: 200%; |
Setting the brightness filter ​
Control the brightness of an element using the brightness-{level} utilities.
âť— Keep in mind
To establish filters like brightness, 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))) brightness(var(--cds-sys-filter-brightness, 100%)) contrast(var(--cds-sys-filter-contrast, 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 brightness effects can be implemented by assigning classes as outlined on this page.