Glassmorphism, and the Design “Isms” Behind Our New Website

We rebuilt this website recently, and the look is deliberate. The frosted panels, the brushed metal headings, the slow-moving shapes behind everything — those come from a specific design language with a slightly ridiculous name.

It’s called glassmorphism. And it’s one of a family of “isms” that have cycled through web design over the last twenty years. Here’s the short tour, and then exactly what we used and what it cost us.

Skeuomorphism: make it look like the real thing

The oldest one. Software that imitates physical objects — a notes app with yellow legal paper, a bookshelf with wood grain, a calculator with beveled plastic buttons.

It looked dated fast, but it existed for a good reason. When touchscreens were new, people needed a hint that a thing was pressable, and “it looks like a button” is about as clear a hint as there is.

Flat design: throw all of it away

Around 2012 the industry reversed hard. Out went shadows, gradients and textures. In came solid color, plain shapes and heavy typography.

It loaded fast and scaled to any screen. It also went too far: when nothing has depth, people genuinely stop knowing what’s clickable. That problem is still on plenty of sites today.

Material design: flat, but with rules about depth

Google’s answer, around 2014. Keep flat’s cleanliness, but treat every surface as a sheet of paper at a specific height, with consistent shadows. Depth returned, governed by a rulebook.

It’s the most sensible of the bunch, which is also why so much of the web looks the same now.

Neumorphism: the one that didn’t work

A 2020 experiment. Buttons that look extruded from the background, with a soft light shadow on one side and a dark one on the other. Genuinely beautiful in a screenshot.

It failed for a boring reason: the contrast is too low. If a button is the same color as its background, people with low vision can’t find it, and in bright sunlight nobody can. Worth knowing as a lesson — if a style can’t clear an accessibility check, it isn’t a style, it’s a mood board.

Glassmorphism: frosted panels floating over something

This is ours. Semi-transparent panels that blur whatever’s behind them, with a thin bright border to catch the edge, floating over a colorful or moving background.

It works because it solves neumorphism’s problem. The blur creates genuine separation between the panel and the background, so contrast stays high and text stays readable, while the transparency still tells you there’s depth. You get atmosphere without losing legibility.

On this site the panels are white at about five percent opacity with a twenty-two pixel blur, sitting over a dark background and a slow 3D scene. The headings use a silver gradient meant to read like light moving across brushed metal.

Brutalism, claymorphism, and the rest

Two more worth knowing. Brutalism is the deliberate rejection of polish — raw type, harsh borders, default blue links, clashing color. When it’s done well it feels honest and memorable. When it’s done badly it just looks broken. Claymorphism is the puffy, rounded, pastel 3D look — friendly, soft, and very popular with apps aimed at beginners.

None of these are rules. They’re vocabularies. Most good sites speak two or three at once.

What glassmorphism actually costs you

Here’s the part most design articles skip, and it’s the part that matters if you’re paying for a website.

That frosted blur is expensive. To draw a blurred panel, the browser has to take everything behind it, blur it, and composite the result — and it has to redo that work any time anything behind the panel changes. Put fifty frosted panels over a moving background and a mid-range phone has real work to do on every single frame.

We found this out on our own site. On desktop it’s effortless. On phones we now serve the panels as solid colors instead of blurred ones, and we freeze the animated shine on the metal headings. It looks nearly identical at that size and it scrolls properly, which matters more.

The 3D background gets the same treatment in reverse: it loads only after the page is ready, it skips itself entirely if you have reduced motion or data saver turned on, and it pauses the moment it scrolls out of view.

The actual lesson

Pick a visual language on purpose, then be willing to turn parts of it off where it costs your visitor something.

A style is not worth a slow site. Most of the time your customer is on a phone, on a mediocre connection, deciding in about four seconds whether to call you. Everything we do visually has to survive that moment, or it doesn’t ship.

Frosted glass is lovely. A site that loads and works is lovelier. If you want both, that — more than any particular ism — is the actual craft.

Tired of the runaround? Let’s talk real numbers. Call (205) 236-2239 or email [email protected]. No twenty-part forms, we promise.