Backdrop Invert

v2.1+

Utilities for applying backdrop invert filters to an element.

Use the and backdrop-invert-0 utilities alongside the backdrop-filter utility to whether an element should be rendered with inverted backdrop colors or normally.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

You can customize which backdrop-invert utilities are generated using the backdropInvert key in the theme section of your tailwind.config.js file.

Learn more about customizing the default theme in the .

You can control which variants are generated for the backdrop invert utilities by modifying the property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

If you don’t plan to use the backdrop invert utilities in your project, you can disable them entirely by setting the backdropInvert property to false in the section of your config file: