Adaptive Tab Bar
Adaptive tab bar ยท pure CSS
Backdrop-filter experiment

A tab bar that reads what's under it

The icons and labels in the floating tab bar don't know anything about the page. Each one is a filtered view of its own backdrop, so it turns white over dark content and black over light content, every frame, on the GPU. Where an edge passes under a label, the label splits along it.

.glyph {
  backdrop-filter: blur(12px) grayscale(1)
                   contrast(40) invert(1);
  mask: url(icon-and-label.svg);
}
  • blur(12px)Averages the area under each glyph so text and noise don't flicker.
  • grayscaleReduces it to brightness.
  • contrast(40)Snaps that brightness to pure black or white.
  • invertFlips it, so the glyph is the opposite of what's behind it.

Scroll through the feed and watch the bar. Switch to Blend or White in the header to compare, and turn on Show filter to see the raw thresholded backdrop before the mask cuts it into icons.

Night skyMostly dark with a bright moon. Glyphs go white, and black where the moon passes.
ArticleBlack text on paper. The blur averages lines of type into light grey, so glyphs stay black.

The last ferry leaves at 9:40

By the time the gangway lifts, the deck is already half empty. Office workers who used to crowd the rails now take the new bridge, and the ferry has become the slow way across, used mostly by people who like it that way.

The captain has run this route for nineteen years. He knows which buoys drift after a storm and which passengers will ask about the tide tables. On Fridays a vendor sells roasted peanuts in paper cones folded from old exam sheets.

The crossing takes twenty-two minutes. Nobody on board seems to want it shorter.

When the engines cut near the far jetty, the water goes quiet enough to hear the gulls again, and for a moment the whole boat leans to watch the lights come on along the shore.

SunsetMid-tones and a hard horizon. Watch the labels split as the horizon line crosses the bar.
Poster gridMixed light and dark tiles, like the Netflix shot. Each glyph decides on its own.
Monsoon Hours
The Long Platform
Salt & Silver
Night Shift
Ferry to Nowhere
Paper Kites
Static
Pink City
StripesHard edges every 38px. Every glyph splits at once, and nothing flickers.
ForestPale mist fading into dark trunks.
SnowNear-white with soft shadows. Plain white labels disappear here; try the White mode.
Where it strugglesMottled 50% grey. Brightness sits near the threshold, so black or white is close to a coin toss and neither reads well.
Scroll inside the phone
Notes

What it costs, and where it stops

Cost. Two backdrop filters, recomputed by the GPU each frame, with no JavaScript in the loop: one for the glass and one shared by all four icons, which are drawn from a single combined mask. The buttons above them are transparent hit targets. Glass and icons are separate layers, so each can be tuned on its own.

Black or white only. The threshold can't produce brand colours. If the whole button needs to change style, such as its shadow or border, pair this with a slower JavaScript check.

Labels are masks. Text and icons are drawn as SVG and used as masks, so they don't use the page's web fonts and can't be selected.

Nesting matters. The glyphs sit beside the glass, not inside it. An ancestor with a filter, opacity, mask or its own backdrop filter becomes the glyph's backdrop root and hides the page from it.

Browser support. Chrome and Edge render this correctly. Safari has had bugs with masked backdrop filters, so check it there before shipping.