4 Pure CSS3 with JSPublished 2026-10-05Free · no sign-up
Seven liquid glass components: a card with a specular rim, a button like a drop of glass, a floating tab bar, a slider with a bubble thumb, a home-screen clock widget, a floating editing toolbar and a bottom sheet of thick glass.
The liquid glass look on a card: heavy blur with saturation, a bright specular rim on the top edge, an inner glow and a gradient border that catches light at two corners. All of it is box-shadows and a masked pseudo-element over a colourful background.
A pill button that looks like a drop of glass: a bright top highlight, a soft inner glow at the bottom and a gentle press that squashes it slightly. The label has a faint shadow and the glass a dark tint, so it stays readable over any background.
A floating tab bar on liquid glass over a bright background, with the selected tab marked by a brighter glass capsule. The tabs are links with aria-current and visible labels, so the glass is decoration over normal navigation.
A volume slider with a glassy track and a bubble thumb, made by styling a native range input. The thumb's highlight and shadow give the drop-of-glass look while the control keeps full keyboard and screen reader support.
A home-screen widget made of glass showing the time and date, updated every minute. The glass uses a light tint suited to a bright wallpaper, and the time is a time element with a machine-readable value.
function tick() { var n = new Date(), t = document.querySelector('.lq5 .t'); t.textContent = n.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }); t.dateTime = n.toISOString(); document.querySelector('.lq5 .d').textContent = n.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' }); }
tick(); setInterval(tick, 60000);
06. Liquid Glass Toolbar
Liquid glassToolbar
A floating editing toolbar of round buttons on a glass bar, like the controls that hover over photos in modern apps. It is a toolbar role with named buttons, and the selected tool is shown with a brighter capsule and aria-pressed.
var bs = document.querySelectorAll('.lq6 button');
bs.forEach(function (b) { b.onclick = function () { bs.forEach(function (x) { x.setAttribute('aria-pressed', x === b); }); }; });
07. Liquid Glass Bottom Sheet
Liquid glassSheet
A glass sheet sliding up over content, with a grab handle and two options. It is a modal dialog for focus handling, and its glass is thick enough that the content underneath blurs into colour instead of competing with the sheet's text.
View code
<div class="lq7"><ul aria-hidden="true"><li></li><li></li><li></li></ul><button class="open">Options</button><dialog aria-label="Options"><span class="g" aria-hidden="true"></span><button>Save to album</button><button>Share</button><button class="c">Cancel</button></dialog></div>
var d = document.querySelector('.lq7 dialog');
document.querySelector('.lq7 .open').onclick = function () { d.showModal(); };
d.querySelectorAll('button').forEach(function (b) { b.onclick = function () { d.close(); }; });
About these CSS Liquid Glass Effects
More than frosted glass
Liquid glass adds depth to plain glassmorphism: a bright highlight along the top edge, an inner glow and a gradient border that catches light at the corners, all from inset box-shadows and a masked pseudo-element.
Blur with saturation
backdrop-filter: blur() saturate() blurs the background and makes its colours richer, which gives the glass its liquid, colourful look.
Tint for the background
Light tints with dark text suit bright wallpapers; darker tints with white text suit colourful dark scenes. Test text on the busiest part of the background.
Glass over real controls
Keep native buttons, links, range inputs and dialogs underneath, so the effect never costs keyboard or screen reader support.
Frequently asked questions
Is this Apple's Liquid Glass?
It is an original CSS take on the glossy glass trend, not a copy of any platform's design.
Does it work without backdrop-filter?
The tints are strong enough to stay readable without blur.
Is it heavy on performance?
Large blurred areas cost more; keep glass to a few elements.