Backdrop Opacity In Tailwind CSS
In this article, we will explore the use of Tailwind Backdrop Opacity class with examples. With Tailwind, you can use the Backdrop Opacity class in all web browsers.
Tailwind Backdrop Opacity
Tailwind Backdrop Opacity class applies a filter to the image and modifies its transparency.
In normal CSS, we accomplish this using the opacity() function. Tailwind CSS added this feature in version 2.1.
Syntax
<element class="filter backdrop-opacity-{number}">..</element>Backdrop Opacity value
- backdrop-opacity-number: In this case, the number can be replaced by a variable from 0 to 100, with a gap of five like 5,10,15 up to 100.
Note: In examples backdrop-hue-rotate class has been applied to differentiate between the examples. When applying backdrop-opacity-100, the backdrop hue-rotate filter is preset. On the other hand with backdrop-opacity-0, the backdrop-hue-rotate filter becomes transparent. For the values between 0 to 100 the backdrop-hue-rotate filter’s transparency increases from 100 to 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 Opacity 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 w-full h-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 font-semibold">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-hue-rotate-180
backdrop-opacity-0 w-1/4">
backdrop-opacity-0
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-hue-rotate-180
backdrop-opacity-20 w-1/4">
backdrop-opacity-20
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-hue-rotate-180
backdrop-opacity-50 w-1/4">
backdrop-opacity-50
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-hue-rotate-180
backdrop-opacity-80 w-1/4">
backdrop-opacity-80
</div>
</div>
</div>
</body>
</html>
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 Opacity 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 w-full h-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 font-semibold">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-hue-rotate-180
backdrop-opacity-10 w-1/4">
backdrop-opacity-10
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-hue-rotate-180
backdrop-opacity-30 w-1/4">
backdrop-opacity-30
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-hue-rotate-180
backdrop-opacity-70 w-1/4">
backdrop-opacity-70
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-hue-rotate-180
backdrop-opacity-100 w-1/4">
backdrop-opacity-100 (default)
</div>
</div>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
