VOOZH about

URL: https://www.geeksforgeeks.org/css/tailwind-css-backdrop-contrast/

⇱ Tailwind CSS Backdrop Contrast - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Backdrop Contrast

Last Updated : 23 Jul, 2025

The Backdrop Contrast class is used to apply to set the Contrast of the image. This class can increase or decrease Contrast. Tailwind CSS newly added feature brightness in 2.1 version.

Backdrop Contrast:

  • backdrop-contrast-0: This class used to set the contrast on an element equivalent to CSS contrast(0).
  • backdrop-contrast-50: This class used to set the contrast on an element equivalent to CSS contrast(0.5).
  • backdrop-contrast-75: This class used to set the contrast on an element equivalent to CSS contrast(0.75).
  • backdrop-contrast-100: This class used to set the contrast on an element equivalent to CSS contrast(1.0).
  • backdrop-contrast-125: This class used to set the contrast on an element equivalent to CSS contrast(1.25).
  • backdrop-contrast-150: This class used to set the contrast on an element equivalent to CSS contrast(1.50).
  • backdrop-contrast-200: This class used to set the contrast on an element equivalent to CSS contrast(2.0).

Syntax:

<element class="filter backdrop-contrast-{amount}">..</element>

Example:

Output:

👁 Image
Comment