- Published on
Glassmorphic Sticky NavBar
Usage of Glassmorphism to achieve a sticky NavBar with a glass effect like the one used on this website.
tailwind.css
Usage in <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);
}