Backdrop Opacity

Use utilities like backdrop-opacity-50 and backdrop-opacity to scale the strength of any backdrop filters applied to an element. Pair with another backdrop filter (e.g. backdrop-invert) to make the effect visible.

Style('...', child: Style('bg-white/30 backdrop-invert backdrop-opacity-10 ...'))
Style('...', child: Style('bg-white/30 backdrop-invert backdrop-opacity-60 ...'))
Style('...', child: Style('bg-white/30 backdrop-invert backdrop-opacity-95 ...'))

Class reference

Class	Description
backdrop-opacity-0	backdrop-filter: opacity(0%);
backdrop-opacity-<number>	backdrop-filter: opacity(<number>%); (e.g. backdrop-opacity-50)
backdrop-opacity-100	backdrop-filter: opacity(100%);
backdrop-opacity	backdrop-filter: opacity(100%);