6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven frosted glass components: a balance card over coloured shapes, a sign-in form, a now-playing music widget, a weather card on a sky background, a modal whose backdrop blurs the page, a payment card and a notification on a light wallpaper.
The core glass recipe on a card: a translucent white fill, backdrop-filter blur, a thin light border and rounded corners over colourful shapes. A dark tint inside the glass keeps white text readable even over the brightest part of the background.
A sign-in form on a glass panel over a photo-like gradient, with fields that are slightly more opaque than the panel so they stand out as places to type. Labels sit above the fields, and focus rings are solid white for visibility.
A now-playing widget on glass: album art, track title, a progress bar and controls, all on a frosted panel over the album's own colours. The controls are labelled buttons, and the progress is a native progress element.
A weather card on glass over a sky gradient, with the temperature large, the condition in words and a small three-day forecast. The light glass tint and dark text suit bright backgrounds better than white text.
A dialog whose panel is glass and whose backdrop blurs the page behind it. Both use backdrop-filter, and the dialog element handles focus trapping and Escape, so the effect is purely visual.
View code
<div class="gls5"><span class="bg" aria-hidden="true"></span><button class="open">Share project</button><dialog aria-labelledby="gls5h"><h3 id="gls5h">Share project</h3><p>Anyone with the link can view.</p><button class="x">Done</button></dialog></div>
var d = document.querySelector('.gls5 dialog');
document.querySelector('.gls5 .open').onclick = function () { d.showModal(); };
d.querySelector('.x').onclick = function () { d.close(); };
06. Glass Payment Card
GlassmorphismCard
A payment card mock-up made of glass over colourful blobs, showing only the last four digits as real account pages should. The card proportions come from aspect-ratio, and the text sits on a darkened tint for contrast.
An iOS-style notification on light glass: app icon, title, message and time, floating over a wallpaper. It is a status region in this demo; light glass with dark text suits bright wallpapers.
View code
<div class="gls7"><div class="n" role="status"><span class="ic" aria-hidden="true">✉</span><div><b>Mail</b><p>Ana: Photos from Saturday are ready.</p></div><time datetime="2026-10-05T09:12">now</time></div></div>
A translucent fill, backdrop-filter: blur(), a thin light border and rounded corners. The background behind must be colourful for the effect to show.
Tint for readability
Add enough tint to the glass that text passes contrast over the lightest part of the background. Dark tint with white text, or light tint with dark text, never clear glass.
Fields need more opacity
Inputs on glass should be a little more opaque than the panel, so they read as places to type rather than part of the decoration.
Blur has a cost
Large blurred areas are expensive on low-end phones. Use glass for a few panels, not every element on the page.
Frequently asked questions
Is backdrop-filter supported?
Yes, in all current major browsers, including Safari with the -webkit- prefix.
What is the difference from liquid glass?
Liquid glass adds stronger highlights, inner glows and depth; see the liquid glass collection.
Does glass work on white backgrounds?
Barely; it needs colour or imagery behind it to show the blur.