Backdrop Hue Rotate

    Utilities for applying backdrop hue-rotate filters to an element.

    Use the utilities to rotate the hue of an element’s backdrop.

    Using negative values

    To use a negative backdrop hue rotate value, prefix the class name with a dash to convert it to a negative value.

    1. <div class="-backdrop-hue-rotate-60">
    2.   <!-- ... -->
    3. </div>

    This can be useful when you want to remove backdrop filters conditionally, such as on hover or at a particular breakpoint.

    Hover, focus, and other states

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:backdrop-hue-rotate-60 to only apply the backdrop-hue-rotate-60 utility on hover.

    1. <div class="backdrop-hue-rotate-15 hover:backdrop-hue-rotate-60">
    2.   <!-- ... -->

    For a complete list of all available state modifiers, check out the documentation.

    You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:backdrop-hue-rotate-60 to apply the backdrop-hue-rotate-60 utility at only medium screen sizes and above.

    Customizing your theme

    By default, Tailwind includes a handful of general purpose backdrop-hue-rotate utilities. You can customize these values by editing theme.backdropHueRotate or theme.extend.backdropHueRotate in your tailwind.config.js file.

    tailwind.config.js

    1.   theme: {
    3.       backdropHueRotate: {
    4.         '-270': '-270deg',
    5.         270: '270deg',
    6.       }
    7.     }
    8.   }

    Learn more about customizing the default theme in the documentation.

    If you need to use a one-off backdrop-hue-rotate value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.