Backdrop Saturate In Tailwind CSS
The purpose of this article is to take a closer look at the Tailwind Backdrop Saturate class through examples.
It is common knowledge that the Backdrop Saturate class, in traditional CSS, is a part of the Backdrop Filter module. This is a new module that is not supported by all browsers at the moment. It is, however, imperative to note that Tailwind allows Backdrop Saturate to be used across all web browsers.
Tailwind Backdrop Saturate
The backdrop Saturate class in CSS is used to super-saturate or desaturate the input image.
Tailwind CSS included this feature in version 2.1.
Syntax
<element class="filter backdrop-saturate-{amount}"></element>Tailwind Backdrop Saturate values:
- backdrop-saturate-0 : Using this class, a saturated equivalent of an element can be set to CSS saturate(0).
- backdrop-saturate-50 : Using this class, a saturated equivalent of an element can be set to CSS saturate(50).
- backdrop-saturate-100 : Using this class, a saturated equivalent of an element can be set to CSS saturate(100).
- backdrop-saturate-150 : Using this class, a saturated equivalent of an element can be set to CSS saturate(150).
- backdrop-saturate-200 : Using this class, a saturated equivalent of an element can be set to CSS saturate(200).
The backdrop-saturate class is a part of the backdrop-filter utility class in Tailwind CSS, which can be used to adjust the appearance of an element’s backdrop (i.e., the area behind an 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 Saturate Class in Tailwind CSS</p>
<div class=" mx-16 mt-18 h-36 relative">
<div class="absolute w-full h-full py-18">
<img class="rounded-lg object-cover h-full w-full" src="https://res.cloudinary.com/practicaldev/image/fetch/s%C3%A2%C2%80%C2%93ffgvkRPj%C3%A2%C2%80%C2%93/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/hmvlcut7wxqua5ijezpu.png" alt="image">
</div>
<div class="relative h-36 flex overflow-x-auto space-x-4 text-white font-semibold">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-saturate-0 w-1/3">
backdrop-saturate-0
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-saturate-100 w-1/3">
backdrop-saturate-100 (Default)
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-saturate-200 w-1/3">
backdrop-saturate-200
</div>
</div>
</div>
</body>
</html>
Example Explain:
Above is a simple example of using the Tailwind backdrop saturate class to adjust the saturation of an image.
- The backdrop-saturate class can be used to adjust the saturation of an element’s backdrop. By default, the saturation is set to 100%, which is the normal saturation level of the image.
- In above example, there is an image displayed using the img tag, which is contained within a div element.
- The backdrop-saturate class is applied to the div element using different values (backdrop-saturate-0, backdrop-saturate-100, and backdrop-saturate-200) to adjust the saturation of the image backdrop to different levels.
- The flex and border utility classes are used to arrange the div elements in a row and give them a border.
- The mx-16, mt-18, h-36, text-white, and font-semibold utility classes are used to adjust the layout and style of the div elements and their contents.
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 Saturate Class in Tailwind CSS</p>
<div class=" mx-16 mt-18 h-36 relative">
<div class="absolute w-full h-full py-18">
<img class="rounded-lg object-cover h-full w-full" src="https://res.cloudinary.com/practicaldev/image/fetch/s%C3%A2%C2%80%C2%93ffgvkRPj%C3%A2%C2%80%C2%93/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/hmvlcut7wxqua5ijezpu.png" alt="image">
</div>
<div class="relative h-36 flex overflow-x-auto space-x-4 text-white font-semibold">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-saturate-50 w-1/2">
backdrop-saturate-50
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-saturate-150 w-1/2">
backdrop-saturate-150
</div>
</div>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
