Tailwind CSS - Blur

Previous
Quiz
Next

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

Tailwind CSS Blur Classes

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

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

Functionality of Tailwind CSS Blur Classes

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

Tailwind CSS Blur Classes Example

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

Example

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

<body class="p-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Blur Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Blur-0</h3>
            <img class="blur-0 object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur-sm</h3>
            <img class="blur-sm object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur</h3>
            <img class="blur object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur-md</h3>
            <img class="blur-md object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur-lg</h3>
            <img class="blur-lg object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Blur-xl</h3>
            <img class="blur-xl object-fit"
                 src=
"/javascript/images/javascript.jpg"
                  alt="Image">
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next