Open In App
Related Articles

Tailwind CSS Backdrop Invert

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The backdrop  invert class is an inbuilt function that is used to apply a filter to the image to set the invert of the color of the sample image. Tailwind CSS newly added feature brightness in 2.1 version.

Backdrop Invert:

  • backdrop-invert-0: This class is used to represent the original color on an element.
  • backdrop-invert: This class is used to represent the inverted color of that original color on an element.

Syntax:

<element class="filter backdrop-invert | 
    backdrop-invert-0">
</element>

Example:

HTML

<!DOCTYPE html>
<html>
<head>
  <link href=
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
    rel="stylesheet">
</head>
 
<body class="text-center mx-4 ">
  <h1 class="text-green-600 text-5xl font-bold">
      GeeksforGeeks
  </h1>
 
  <b>Tailwind CSS Backdrop Invert Rotate Class</b>
 
  <div class=" mx-16 mt-18 h-36 relative">
    <div class="absolute w-full py-18">
        <img class="rounded-lg object-cover" src=
         alt="image">
    </div>
 
    <div class="relative h-32 flex overflow-x-auto space-x-4">
      <div class="flex-shrink-0 border-4 border-green-500
           backdrop-filter -backdrop-invert-0 w-1/2">
      </div>
 
      <div class="flex-shrink-0 border-4 border-green-500
           backdrop-filter backdrop-invert w-1/2">
      </div>
    </div>
  </div>
</body>
 
</html>

                    


Output:



Last Updated : 09 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads