Readability
Can people read the words?
-: 1measuring
Measuring the backdrop under the words.
GB-01 · Test card · Drag the glass
Glass that bends what is behind it.
Design a glass panel on the bench, check that the words on it read, and take it home as one small snippet. Real refraction in Chrome and Edge. Frost in Safari and Firefox. A solid panel for anyone who turns transparency down.
bend 60 · rim 44 · split .14
refractiondrag me
02 · The bench
Shape a pane. See what it costs.
Pick a backdrop, shape the glass and drag it around. The readability check and the cost meter update as you go, and the export at the bottom always matches the stage.
Specimen · Kelp stripes, moving
Drop your image
The same pane in all three modes, so you design for everyone at once.
Cost meter
What will this cost the device?
Measuring
This device, right now: measuring
03 · The rules
Six rules from the lab.
We tested glass on six lab pages before it went near a real site. These rules came out of it. Each card has a button that breaks its rule on the bench, so you can watch the meter react.
Put a pattern behind it.
Glass over a flat colour is a tinted box. It needs stripes, type or a pattern to bend, or nobody can tell it is glass.
One layer. Never glass on glass.
A pane looking through another pane blurs twice and bends twice. It turns to mud and costs double.
Two pieces at most over moving content.
When the backdrop moves, every pane bends it again on every frame. In our lab the slowest frames roughly doubled.
Never on a sticky bar over animation.
A sticky bar re-bends the page on every scroll frame. In the lab a blurred sticky bar took one page down to 1 frame a second on a software GPU. Bars get a solid colour.
Words get a darker tint or a plate.
Glass shows whatever is behind it, bright stripes included. A tint or a quiet plate keeps the words readable wherever the pane goes.
Frost is the fallback, and that is fine.
Only Chrome and Edge can bend light with an SVG filter. Safari and Firefox get frosted glass, and people who turn transparency down get a solid panel.
This row is glass too: six panes over a still pattern, which costs almost nothing. Over moving stripes the rule says two.
04 · How it works
A map of the rim and three small nudges.
No library does this. The glass is an SVG filter the browser runs on whatever sits behind the pane. The picture below is the real lens map for the pane on your bench right now.
Contrast boosted here so you can see it. The real map is subtler.
red: push sidewaysgreen: push up and downgrey: leave alone
- Blur what is behind. A Gaussian blur of 6 px softens the backdrop. That is the frost.
- Read the lens map. Each pixel of the map says which way to push the picture. Only the rim bends, the way the edge of a real lens does, and the middle stays flat so the words sit still.
- Move every pixel three times. Red moves 80 px at full strength, green 86, blue 93. Those small differences are the rainbow fringe at the rim.
- Put the colours back together. Screen the three channels back into one picture and add a little saturation.
- Hand it to the browser.
backdrop-filter: url(#glass). Only Chrome and Edge accept an SVG filter there, so everyone else getsblur()from the same stylesheet.
05 · Take it home
One snippet. No libraries.
Paste it anywhere in a page. It finds every element with the class gb-glass, builds a lens for each one at its real size, and rebuilds when the size changes.
- Markup with your words
- CSS with the frost fallback built in
- The lens map and SVG filter, the same code the Brain Melt kit uses
- A solid panel for people who turn transparency down
- A credit line you can keep or drop