Published on

Glassmorphic Sticky NavBar

Usage of Glassmorphism to achieve a sticky NavBar with a glass effect like the one used on this website.

Usage in tailwind.css

<header className="sticky top-0 left-0 right-0 z-50 border-b border-gray-200 bg-opacity-30 py-4 backdrop-blur-lg backdrop-filter dark:border-gray-700">
<header/>

Usage in normal CSS

.navbar {
  position: sticky;
  z-index: 10;
  top: 0;
  backdrop-filter: saturate(180%) blur(20px);
}