Glass Generator

// what it does and why

Six sliders and a live preview. Drag them until the panel looks right, press one button, and the CSS for it is on your clipboard. That is the whole tool, and nothing you do in it leaves your browser.

Open it →
6Sliders
6Lines of CSS out
40pxMaximum blur
0Things to install

What it does

Frosted glass in a browser is not one setting, it is six of them arguing with each other. The sliders are blur, tint opacity, border opacity, corner radius, tint hue, and the strength of the thin highlight along the top edge. Every drag redraws the preview immediately and rewrites the CSS block underneath it.

What comes out is six lines, ready to paste onto any element. It includes the duplicate WebKit line, because Safari still wants its own copy of the blur instruction, and leaving that out is the usual reason a panel looks right everywhere except on an iPhone. The copy button says Copied! and turns back after a second.

Why it exists

Almost every page on this site is a floating glass panel over a starfield, so I was tuning these numbers constantly. Edit a stylesheet, reload, squint, edit again. Each round trip takes a few seconds and you need dozens of them, because the values are not independent. Blur with no tint reads as a smear. Tint with no blur reads as flat coloured plastic. The border and the top highlight are what make the edge look like a real pane instead of a rectangle somebody drew.

A slider collapses that loop to nothing. I built this in an afternoon for my own use and then left it up, because the same guessing game is how most people end up with a glass panel that is technically correct and still looks cheap.

The preview background is ugly on purpose

The panel sits over a loud gradient with a purple circle and a green circle behind it. That is not decoration. Glass only reveals itself over contrast. Against a flat dark background every setting looks roughly the same and you genuinely cannot tell a light blur from a heavy one. The circles are there so you can watch their edges dissolve as you drag, which is the only reliable way to judge how much blur you actually have.

What it deliberately will not do

The hue slider moves hue only. The saturation and lightness of the tint are fixed, so you get a family of soft pastels and never a strong colour. That is the right default for glass and the wrong answer if you want something bold. The saturation boost inside the filter is fixed as well. There are no presets and nothing is remembered, so a reload puts you back at the starting values.

Those are choices rather than bugs, and the way past them is to take the output and edit one number by hand. I would rather ship six honest sliders than twenty that each do a little.

Worth knowing before you use it: backdrop blur does not blur a picture of your background, it blurs whatever is really behind the panel at that moment and pulls those colours up into it. On the weather map on this site, panels built this way turned green every time a storm cell passed underneath them. The fix there was taking the blur off that page entirely. Glass is for sitting over something you control. Over live data, it will change colour on you.

Built with nothing

One page, no libraries, no build step, no server. It does the arithmetic as you drag, and once it has loaded it keeps working with the network switched off. There is nothing to sign up for and nothing is sent anywhere, because there is nowhere for it to be sent.