Backdrop Hue Rotate

Use backdrop-hue-rotate-<number> utilities to rotate the hue of the colors in the area behind an element.

Basic example

Use utilities like backdrop-hue-rotate-90 and backdrop-hue-rotate-180 to rotate the hue of an element’s backdrop:

Style('...', child: Style('bg-white/30 backdrop-hue-rotate-90 ...'))
Style('...', child: Style('bg-white/30 backdrop-hue-rotate-180 ...'))
Style('...', child: Style('bg-white/30 backdrop-hue-rotate-270 ...'))

Using negative values

Use utilities like -backdrop-hue-rotate-15 and -backdrop-hue-rotate-45 to set a negative backdrop hue rotation value:

Style('...', child: Style('bg-white/30 -backdrop-hue-rotate-15 ...'))
Style('...', child: Style('bg-white/30 -backdrop-hue-rotate-45 ...'))
Style('...', child: Style('bg-white/30 -backdrop-hue-rotate-90 ...'))

Class reference

Class	Description
backdrop-hue-rotate-<number>	Set backdrop hue rotation to <number> degrees
-backdrop-hue-rotate-<number>	Set backdrop hue rotation to negative <number> degrees