How to Create a Frosted Navbar with TailwindCSS ?

Last Updated : 24 Jul, 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/[email protected]/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>