How to Create a Frosted Navbar with TailwindCSS ?

Last Updated : 08 Feb, 2024

A frosted navbar is a type of navigation bar that has a translucent appearance and when the contents of the page are scrolled it appears to blur behind the navbar. It is a popular design element in modern web development. Creating a frosted navbar effect with Tailwind CSS involves utilizing Tailwind’s utility classes and custom CSS for the frosted effect.

Syntax:

<element class="frosted sticky top-0 bg-opacity-40">
    Content
</element>

Approach

First, Create a simple page layout using different utility classes to modify specific properties like backdrop-filter, backdrop-blur-md, and bg-opacity-50.
The backdrop-filter utility applies a blur effect to the content behind the element. The backdrop-blur-md sets the strength of the blur effect to medium. bg-opacity-50 sets the background color opacity to 50%, allowing some of the blurred content to show through.
These classes sticky top-0 makes the navbar sticky and position it at the top of the viewport (top-0). The sticky class ensures that the navbar sticks to the top of the viewport as the user scrolls down the page.
Utility class bg-opacity-40 sets the background opacity of the navbar to 40%. It allows some of the content behind the navbar to show through, enhancing the frosted effect.

Example: Illustration of Frosted Navbar with TailwindCSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Frosted Navbar using Tailwind</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <!-- Tailwind CSS CDN Link -->
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet" />
 
</head>
 
<body>
    <nav class="bg-gray-400 py-4 backdrop-filter 
                backdrop-blur-md sticky top-0 
                bg-opacity-40">
        <div class="container mx-auto flex 
                    justify-between items-center
                    px-4">
            <a href="#" class="text-green-900 
                               text-xl font-bold">
              GeeksforGeeks
              </a>
 
            <!-- Navigation Links -->
            <ul class="flex space-x-4">
                <li><a href="#"
                       class="text-green-900 font-bold">
                          Home
                      </a>
                  </li>
                <li><a href="#"
                       class="text-green-900 font-bold">
                          About
                      </a>
                  </li>
                <li><a href="#"
                       class="text-green-900 font-bold">
                          Services
                      </a>
                  </li>
                <li><a href="#"
                       class="text-green-900 font-bold">
                          Contact
                      </a>
                  </li>
            </ul>
        </div>
    </nav>
    <div class="mx-auto mt-3 px-9 w-1/2">
        <h1 class="text-green-600 text-5xl font-bold mb-8">
              Tailwind CSS
          </h1>
        <h2 class="font-bold mb-8 text-green-900">
          Create a Frosted Navbar with TailwindCSS
          </h2>
        <p>
            Tailwind CSS is basically a Utility first CSS
              framework for building rapid custom UI. It is
              a highly customizable, low-level CSS framework
              that gives you all of the building blocks that
              you need. Also, it is a cool way to write inline
              styling and achieve an awesome interface without
              writing a single line of your own CSS. As we know
              there are many CSS frameworks but people always
              choose the fast and easy framework to learn and
              use in the project. Tailwind has come with inbuilt
              a lot of features and styles for users to choose 
              from and is also used to reduce the tendency of 
              writing CSS code and create a beautiful custom UI.
              It will help you to overcome the complicated task.
              Tailwind CSS creates small utilities with a defined
              set of options enabling easy integration of existing
              classes directly into the HTML code. It is a highly
              customizable, low-level CSS framework that gives you
              all of the building blocks that you need. Also, it 
              is a cool way to write inline styling and achieve an
              awesome interface without writing a single line of 
              your own CSS. As we know there are many CSS frameworks
              but people always choose the fast and easy framework
              to learn and use in the project.
        </p>
    </div>
</body>
 
</html>