Backdrop Contrast
Use backdrop-contrast utilities to control the contrast of the area behind an element.
Basic example
Section titled “Basic example”Use utilities like backdrop-contrast-50 and backdrop-contrast-200 to control an element’s backdrop contrast:
Style('...', child: Style('bg-white/30 backdrop-contrast-50 ...'))Style('...', child: Style('bg-white/30 backdrop-contrast-200 ...'))Class reference
Section titled “Class reference”| Class | Description |
|---|---|
backdrop-contrast-0 | Set backdrop contrast to 0 |
backdrop-contrast-50 | Set backdrop contrast to 0.5 |
backdrop-contrast-75 | Set backdrop contrast to 0.75 |
backdrop-contrast-90 | Set backdrop contrast to 0.9 |
backdrop-contrast-95 | Set backdrop contrast to 0.95 |
backdrop-contrast-100 | Set backdrop contrast to 1 |
backdrop-contrast-105 | Set backdrop contrast to 1.05 |
backdrop-contrast-110 | Set backdrop contrast to 1.1 |
backdrop-contrast-125 | Set backdrop contrast to 1.25 |
backdrop-contrast-150 | Set backdrop contrast to 1.5 |
backdrop-contrast-200 | Set backdrop contrast to 2 |