Backdrop Brightness In Tailwind CSS
In this article, we will discuss and demonstrate the use cases of the Tailwind Backdrop Brightness class.
Tailwind CSS enables developers to use the Backdrop Brightness class in all web browsers. The brightness feature was introduced in Tailwind CSS version 2.1.
In normal CSS, the Backdrop Brightness 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 Brightness
One of the many useful utility classes available in Tailwind is the Backdrop Brightness class.
Using the backdrop brightness class, the brightness of an image can be adjusted.
It increases or decreases brightness using a linear multiplier.
Tailwind Backdrop Brightness Classes
- backdrop-brightness-0 – The brightness of an element is set to 0% of default brightness using this class. Equivalent to CSS brightness(0).
- backdrop-brightness-50 – The brightness of an element is set to 50% of default brightness using this class. Equivalent to CSS brightness(0.5).
- backdrop-brightness-75 – The brightness of an element is set to 75% of default brightness using this class. Equivalent to CSS brightness(0.75).
- backdrop-brightness-90 – The brightness of an element is set to 90% of default brightness using this class. Equivalent to CSS brightness(0.9).
- backdrop-brightness-95 – The brightness of an element is set to 95% of default brightness using this class. Equivalent to CSS brightness(0.95).
- backdrop-brightness-100 – The brightness of an element is set to default using this class. Equivalent to CSS brightness(1.0).
- backdrop-brightness-105 – The brightness of an element is set to 105% of default brightness using this class. Equivalent to CSS brightness(1.05).
- backdrop-brightness-110 – The brightness of an element is set to 110% of default brightness using this class. Equivalent to CSS brightness(1.10).
- backdrop-brightness-125 – The brightness of an element is set to 125% of default brightness using this class. Equivalent to CSS brightness(1.25).
- backdrop-brightness-150 – The brightness of an element is set to 150% of default brightness using this class. Equivalent to CSS brightness(1.50).
- backdrop-brightness-200 – The brightness of an element is set to 200% of default brightness using this class. Equivalent to CSS brightness(2.0).
Syntax:
<element class="backdrop-filter backdrop-brightness-{amount}">
..
</element>Tailwind Backdrop Brightness Example: 1
<!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 m-2">
MrExamples
</h1>
<p class="my-2 font-semibold">Backdrop Brightness Class in Tailwind CSS</p>
<div class=" mx-16 mt-22 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 text-sm">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-50 w-1/4">
backdrop-brightness-50
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-90 w-1/4">
backdrop-brightness-90
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-110 w-1/4">
backdrop-brightness-110
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-200 w-1/4">
backdrop-brightness-200
</div>
</div>
</div>
</body>
</html>
Tailwind Backdrop Brightness Example: 2
<!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 m-2">
MrExamples
</h1>
<p class="my-2 font-semibold">Backdrop Brightness Class in Tailwind CSS</p>
<div class=" mx-16 mt-22 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 text-sm">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-0 w-1/4">
backdrop-brightness-0
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-95 w-1/4">
backdrop-brightness-95
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-105 w-1/4">
backdrop-brightness-105
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-125 w-1/4">
backdrop-brightness-125
</div>
</div>
</div>
</body>
</html>
Tailwind Backdrop Brightness Example: 3
<!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 m-2">
MrExamples
</h1>
<p class="my-2 font-semibold">Backdrop Brightness Class in Tailwind CSS</p>
<div class=" mx-16 mt-22 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 text-sm">
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-75 w-1/4">
backdrop-brightness-75
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-100 w-1/4">
backdrop-brightness-100
</div>
<div class="flex-shrink-0 border-2 border-gray-500
backdrop-filter backdrop-brightness-150 w-1/4">
backdrop-brightness-150
</div>
</div>
</div>
</body>
</html>
Example Explaination
In Above example we are using the “backdrop-brightness” property to adjust the brightness of the area behind an element.
The code starts with the declaration of a doctype for HTML5 and then defines an HTML document that contains a head section and a body section.
In the head section, a link to a script file on a CDN (content delivery network) is included. This script file provides access to the Tailwind CSS framework.
- In the body section, a heading, a paragraph, and a container with a background image are defined.
- The container includes a set of three child elements, each with different Tailwind CSS classes applied.
- These classes use the “backdrop-filter” property to apply a brightness effect to the background image.
- The child elements have different brightness values applied using the “backdrop-brightness” property with different values (75, 100, 150), resulting in a range of different brightness levels.
Overall, above examples demonstrates how to use Tailwind Backdrop Brightness class to adjust the brightness of the area behind an HTML element, creating a visually appealing design.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
