5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven glassmorphic and liquid glass navigation bars: classic frosted glass, a floating pill, the liquid glass look with specular highlights, a dark smoked bar over a bright photo, a navbar whose dropdown is glass too, a dock of app icons and a segmented control on glass.
A navbar over colourful shapes with backdrop-filter: blur and a translucent white fill, the classic frosted glass. A thin light border on the top edge sells the glass edge, and the fill is strong enough that the links pass contrast even where blur is unsupported.
A compact navbar that floats as a rounded pill, centred over the page with a little gap from the top. The glass tint is a light white with a soft shadow, a look that suits light, photo-heavy pages.
The liquid glass look: a heavier blur, a bright specular highlight along the top edge, an inner glow and a subtle refraction-like gradient border. It is all layered box-shadows and a masked gradient border, with no images or SVG filters.
Glass does not have to be white: a dark smoked tint over a bright photo gives strong contrast for white links and a more serious tone. The tint is rgba black at 55 percent, which keeps the links readable on the lightest part of any image.
The dropdown under a glass navbar should be glass too, or it looks pasted on. Both share the same tint, blur and border tokens through custom properties, and the dropdown is a disclosure button with aria-expanded.
var b = document.querySelector('.gn5 button'), m = document.getElementById('gn5m');
b.onclick = function () { var o = b.getAttribute('aria-expanded') !== 'true'; b.setAttribute('aria-expanded', o); m.hidden = !o; };
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !m.hidden) { b.click(); b.focus(); } });
06. Glass Dock with Hover Lift
GlassDock
A desktop-style dock of app icons on a glass shelf at the bottom, where the hovered or focused icon lifts and grows. Each icon is a link with a name, and a small dot under the current app marks it with aria-current as well.
A segmented control on glass where a brighter pill slides behind the selected item. The items are links with aria-current, the pill is a single element moved with transform, and its position is computed from the current link's box.
var nav = document.querySelector('.gn7 nav'), pill = nav.querySelector('.pill'), links = nav.querySelectorAll('a');
function to(a) { pill.style.width = a.offsetWidth + 'px'; pill.style.transform = 'translateX(' + a.offsetLeft + 'px)'; }
links.forEach(function (a) { a.onclick = function (e) { e.preventDefault(); links.forEach(function (x) { if (x === a) x.setAttribute('aria-current', 'page'); else x.removeAttribute('aria-current'); }); to(a); }; });
to(nav.querySelector('[aria-current]'));
About these CSS Glass and Liquid Glass Navbars
Blur plus a tint
backdrop-filter: blur() softens what is behind the bar, but the tint does the readability work. Choose a background alpha that gives the links enough contrast on their own, so browsers without blur still show a usable bar.
Liquid glass is light
The liquid glass look adds a bright top highlight, inner glows and a gradient border, all with inset box-shadows and a masked pseudo-element. It needs a colourful background to come alive.
Share glass tokens
Put the tint, blur and border colour in custom properties so the navbar, its dropdowns and any popovers use the same glass, rather than drifting apart.
Test on real backgrounds
Glass changes with whatever is behind it. Check the bar over the lightest and busiest parts of your page, not only over a gradient.
Frequently asked questions
Does backdrop-filter hurt performance?
Large blurred areas cost more than flat colour. Keep the glass area modest, as a navbar is.
Is liquid glass the same as glassmorphism?
It is a newer variation with stronger highlights and depth; the core is still a blurred translucent layer.
What about Firefox?
backdrop-filter is supported in current Firefox; older versions show the tint without blur.