Backdrop Grayscale

Use backdrop-grayscale utilities to control how much of the area behind an element is rendered in grayscale.

Basic example

Use utilities like backdrop-grayscale-50 and backdrop-grayscale to control an element’s backdrop grayscale:

Style('...', child: Style('bg-white/30 backdrop-grayscale-0 ...'))
Style('...', child: Style('bg-white/30 backdrop-grayscale-50 ...'))
Style('...', child: Style('bg-white/30 backdrop-grayscale ...'))

Class reference

Class	Description
backdrop-grayscale-0	Set backdrop grayscale to 0
backdrop-grayscale-25	Set backdrop grayscale to 0.25
backdrop-grayscale-50	Set backdrop grayscale to 0.5
backdrop-grayscale-75	Set backdrop grayscale to 0.75
backdrop-grayscale-100	Set backdrop grayscale to 1
backdrop-grayscale	Set backdrop grayscale to 1 (alias for backdrop-grayscale-100)