Tailwind CSS - Backdrop Blur

Previous
Quiz
Next

Tailwind CSS Backdrop Blur is a utility class used to apply a Backdrop Blur filter to an element.

Tailwind CSS Backdrop Blur Classes

The following is the list of Tailwind CSS Backdrop Blur Classes that are used to effectively apply backdrop blur filters.

Class CSS Properties
backdrop-blur-none backdrop-filter: ;
backdrop-blur-sm backdrop-filter: blur(4px);
backdrop-blur backdrop-filter: blur(8px);
backdrop-blur-md backdrop-filter: blur(12px);
backdrop-blur-lg backdrop-filter: blur(16px);
backdrop-blur-xl backdrop-filter: blur(24px);
backdrop-blur-2xl backdrop-filter: blur(40px);
backdrop-blur-3xl backdrop-filter: blur(64px);

Functionality of Tailwind CSS Backdrop Classes

  • backdrop-blur-none: This class is used to remove the backdrop blur filter from an element.
  • backdrop-blur-sm: This class is used to apply a small backdrop blur filter to an element of blur radius 4px.
  • backdrop-blur: This class is used to apply a backdrop blur filter of blur radius 8px to an element.
  • backdrop-blur-md: This class is used to apply a medium backdrop blur filter to an element of blur radius 12px.
  • backdrop-blur-lg: This class is used to apply a large backdrop blur filter to an element of blur radius 16px.
  • backdrop-blur-xl: This class is used to apply an extra large backdrop blur filter to an element of blur radius 24px.
  • backdrop-blur-2xl: This class is used to apply a double extra large backdrop blur filter to an element of blur radius 40px.
  • backdrop-blur-3xl: This class is used to apply a triple extra large blur filter to an element of blur radius 64px.

Tailwind CSS Backdrop Blur Classes Example

The following example will illustrate the different possibilities and utilities of Tailwind CSS Backdrop Blur classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Backdrop Blur Classes
    </h2>
    <div class="flex gap-3 flex-wrap ">

        <div class="relative w-44 h-44">
            <img class="object-fit w-full h-full" 
                 src=
"/javascript/images/javascript.jpg" 
                 alt="Image">
            <div class="backdrop-blur-sm absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-sm
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                 src=
"/javascript/images/javascript.jpg" 
                 alt="Image">
            <div class="backdrop-blur-md absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-md
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                 src=
"/javascript/images/javascript.jpg" 
                 alt="Image">
            <div class="backdrop-blur-lg absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-lg
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                 src=
"/javascript/images/javascript.jpg" 
                 alt="Image">
            <div class="backdrop-blur-2xl absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-2xl
            </div>
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next