Navbar with Tailwind CSS backdrop-blur
Ugi Stelmokaitis
Sydney, Australia
Date:
June 20, 2022
Category:
Tailwind-css
If you're looking to add a touch of class to your website, then you should definitely consider using the glassmorphism design trend. I’ve also implemented this methodology to my navigation bar in this personal website if you have noticed. This methodology involves applying a backdrop-blur to an element, giving it a sense of translucency and distinct perspective from its surrounding elements.
One of the best ways to achieve a glassmorphism effect is through the use of Tailwind CSS. This utility-first CSS framework provides all the tools necessary to create sophisticated glassmorphism designs without having to write any custom CSS code.
In this article, I will show you step by step how to create a basic glassmorphism nav bar using Tailwind CSS.
Navigation bar
Let's get started with some HTML semantic to build a navigation bar:
1<>
2 <div>
3 <a href="#">Home</a>
4 <a href="#"> Work </a>
5 <a href="#"> About </a>
6 <a href="#"> Blog </a>
7 <a href="#"> Contact </a>
8 <button type="button">Contact me</button>
9 </div>
10 <div>
11 <h1>Hello world!</h1>
12 </div>
13</>;1<>
2 <div>
3 <a href="#">Home</a>
4 <a href="#"> Work </a>
5 <a href="#"> About </a>
6 <a href="#"> Blog </a>
7 <a href="#"> Contact </a>
8 <button type="button">Contact me</button>
9 </div>
10 <div>
11 <h1>Hello world!</h1>
12 </div>
13</>;
To make the element more appealing, let’s add some css to it, making it to behave like a genuine navigation bar:
1import type { FC } from 'react';
2import Container from './container';
3
4const App: FC = () => (
5 <div className="bg-slate-100 pb-96">
6 <div>
7 <Container>
8 <div className="flex items-center justify-between py-4">
9 <img src="logo.png" alt="logo" width="45" height="45"/>
10 <div className="space-x-4">
11 <a className="text-green" href="#">
12 Home
13 </a>
14 <a href="#"> Work </a>
15 <a href="#"> About </a>
16 <a href="#"> Blog </a>
17 <a href="#"> Contact </a>
18 </div>
19
20 <button
21 type="button"
22 className="bg-orange-300 text-slate-900
23 border-orange-400 rounded-t-lg
24 rounded-b-lg border-2 p-2"
25 >
26 Contact me
27 </button>
28 </div>
29 </Container>
30 </div>
31 </div>
32);
33
34export default App;1import type { FC } from 'react';
2import Container from './container';
3
4const App: FC = () => (
5 <div className="bg-slate-100 pb-96">
6 <div>
7 <Container>
8 <div className="flex items-center justify-between py-4">
9 <img src="logo.png" alt="logo" width="45" height="45"/>
10 <div className="space-x-4">
11 <a className="text-green" href="#">
12 Home
13 </a>
14 <a href="#"> Work </a>
15 <a href="#"> About </a>
16 <a href="#"> Blog </a>
17 <a href="#"> Contact </a>
18 </div>
19
20 <button
21 type="button"
22 className="bg-orange-300 text-slate-900
23 border-orange-400 rounded-t-lg
24 rounded-b-lg border-2 p-2"
25 >
26 Contact me
27 </button>
28 </div>
29 </Container>
30 </div>
31 </div>
32);
33
34export default App;
Then, we are going to add:
- background color: bg-bg-white/60 - means white background with 60% opacity
- z-50 - order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Lower number will be actual entire page. So Nav bar sits on top now.
- fixed top-0 left-0 right-0 - position of nav bar will be fixed to the top
- border-b border-gray-200/90 - add As it stands now, the frosted glass navbar can be hard to distinguish from the background of the website if your website color is white so we add a border as it allows to harsh the color contrast the blurry background of the navbar, visually identifying the end of the element. It’s subtle, but adds a whole new layer to the overall presentation
1<div className="fixed top-0 left-0 right-0 z-50 border-b border-gray-200/90 bg-white/60 py-3 transition-all">1<div className="fixed top-0 left-0 right-0 z-50 border-b border-gray-200/90 bg-white/60 py-3 transition-all">
The layout of your website will look something like the image above. Finally, we will add the blur effect to the navigation bar.
Following step: #backdrop-blur-md
To insert the backdrop-blur-md utility classes, add them to the parent <div> element.
1import type { FC } from 'react';
2import Container from './container';
3
4const App: FC = () => (
5 <div className="bg-slate-100 pb-96">
6 <div
7 className="border-gray-200/90 bg-white/60 firefox:bg-white
8 fixed top-0 left-0
9 right-0 z-50 border-b py-3 backdrop-blur-md
10 transition-all">
11 <Container>
12 <props />
13 </Container>
14 </div>
15 </div>
16);
17export default App;1import type { FC } from 'react';
2import Container from './container';
3
4const App: FC = () => (
5 <div className="bg-slate-100 pb-96">
6 <div
7 className="border-gray-200/90 bg-white/60 firefox:bg-white
8 fixed top-0 left-0
9 right-0 z-50 border-b py-3 backdrop-blur-md
10 transition-all">
11 <Container>
12 <props />
13 </Container>
14 </div>
15 </div>
16);
17export default App;
The navbar's design is sleek and stylish, but its transparency can make it difficult to see on a white background. Adding a subtile thine line at the bottom of the nav bar will assist in the distinction of the navbar's blurry background and visually mark the element's conclusion.
1<div className="fixed top-0 left-0 right-0 z-50 bg-white/30 py-3 backdrop-blur-md">1<div className="fixed top-0 left-0 right-0 z-50 bg-white/30 py-3 backdrop-blur-md">Don't forget the Firefox users
If you're previewing your site on Firefox, you might notice that the blur effect doesn't show up at all. That's because Firefox doesn't support CSS backdrop-blur.
The workaround is to increase the opacity of the navbar only on devices that use Firefox. This way, users will still be able to see the content behind the navbar.
tailwind.config.js
add the following code under the plugins property:
1plugins: [
2 plugin(function ({addVariant, e, postcss}) {
3 addVariant("firefox", ({container, separator}) => {
4 const isFirefoxRule = postcss.atRule({
5 name: "-moz-document",
6 params: "url-prefix()",
7 });
8 isFirefoxRule.append(container.nodes);
9 container.append(isFirefoxRule);
10 isFirefoxRule.walkRules((rule) => {
11 rule.selector = `.${e(
12 `firefox${separator}${rule.selector.slice(1)}`
13 )}`;
14 });
15 });
16 }),
17 ],
18};1plugins: [
2 plugin(function ({addVariant, e, postcss}) {
3 addVariant("firefox", ({container, separator}) => {
4 const isFirefoxRule = postcss.atRule({
5 name: "-moz-document",
6 params: "url-prefix()",
7 });
8 isFirefoxRule.append(container.nodes);
9 container.append(isFirefoxRule);
10 isFirefoxRule.walkRules((rule) => {
11 rule.selector = `.${e(
12 `firefox${separator}${rule.selector.slice(1)}`
13 )}`;
14 });
15 });
16 }),
17 ],
18};Now head back to the <div> parent element and include the following class:
1<div className="fixed top-0 ...... firefox:bg-white">1<div className="fixed top-0 ...... firefox:bg-white">
Summary
In conclusion, the blurry menu bar can be a helpful way to add depth and visual interest to your website. However, it's important to keep in mind that this approach may not work for every site. You'll need to experiment to see what looks best on your particular site.
Hope you find this blog helpful. Now, go make some fun with Tailwind CSS backdrop-blur!
Share this article:
