Backdrop Contrast In Tailwind CSS
In this article, we will discuss and demonstrate the use cases of Tailwind Backdrop Contrast class.
The contrast feature was introduced in Tailwind CSS version 2.1.
Tailwind enables developers to use the Backdrop Contrast class in all web browsers.
In normal CSS, the Backdrop Contrast class is part of the Backdrop Filter module, which is a new module that is not yet supported by all browsers.
Table Of Content-
Tailwind Backdrop Contrast
One of the many useful classes available in Tailwind is the Backdrop Contrast class.
Using the backdrop contrast class, you can adjust the image’s contrast.
It can be used to increase or decrease contrast.
Syntax
<element class="filter backdrop-contrast-{amount}">..</element>Tailwind Backdrop Contrast Values
- backdrop-contrast-0 – The contrast on an element is set to 0% of default contrast using this class. Equivalent to CSS contrast(0).
- backdrop-contrast-50 – The contrast on an element is set to 50% of default contrast using this class. Equivalent to CSS contrast(0.5).
- backdrop-contrast-75 – The contrast on an element is set to 75% of default contrast using this class. Equivalent to CSS contrast(0.75).
- backdrop-contrast-100 – The contrast on an element is set to default using this class. Equivalent to CSS contrast(1.0).
- backdrop-contrast-125 – The contrast on an element is set to 125% of default contrast using this class. Equivalent to CSS contrast(1.25).
- backdrop-contrast-150 – The contrast on an element is set to 150% of default contrast using this class. Equivalent to CSS contrast(1.50).
- backdrop-contrast-200 – The contrast on an element is set to 200% of default contrast using this class. Equivalent to CSS contrast(2.0).
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 ">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Backdrop Contrast Class in Tailwind CSS</p>
<div class=" mx-16 mt-18 h-36 relative">
<div class="absolute w-full py-18">
<img class="rounded-lg object-cover" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image">
</div>
<div class="relative h-36 flex overflow-x-auto space-x-2 text-white">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-0 w-1/4">
backdrop-contrast-0
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-75 w-1/4">
backdrop-contrast-75
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-100 w-1/4">
backdrop-contrast-125
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-200 w-1/4">
backdrop-contrast-200
</div>
</div>
</div>
</body>
</html>
Example Explanation
In above example, we have a page that shows different Tailwind backdrop contrast classes.
Here is a breakdown of above example:
- The head section includes a link to the Tailwind CSS library.
- The body section contains a heading, a paragraph, and an image that are centered on the page. It also includes a div element that has a class of mx-16 mt-18 h-36 relative. This div element contains two child elements: an absolute positioned div with a class of w-full py-18, and a relative positioned div that has a class of h-36 flex overflow-x-auto space-x-2 text-white.
- The img tag contains an image source, and it has a class of rounded-lg object-cover.
- The second div contains four child div elements, each with a class of flex-shrink-0 border-2 border-gray-500 backdrop-filter.
- The different backdrop-contrast classes are applied to each of these div elements to show how they affect the contrast of the backdrop behind the element.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 ">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Backdrop Contrast Class in Tailwind CSS</p>
<div class=" mx-16 mt-18 h-36 relative">
<div class="absolute w-full py-18">
<img class="rounded-lg object-cover" src="https://miro.medium.com/max/644/1*d7Xs5RnaqcQtKzbNrAOAYA.png" alt="image">
</div>
<div class="relative h-32 flex overflow-x-auto space-x-2 text-white">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-50 w-1/4">
backdrop-contrast-50
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-100 w-1/4">
backdrop-contrast-100
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-contrast-150 w-1/4">
backdrop-contrast-150
</div>
</div>
</div>
</body>
</html>
Above examples show how to use the Tailwind backdrop contrast property to manipulate the contrast of the backdrop behind an element.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
