Solid Ass

It's pretty bad! :3

Try it out below on various backgrounds

Solid ass
Solid ass
Solid ass
Solid ass

I wanted to see how difficult it would be to try and emulate Apple's new Liquid Glass design using pure CSS. It's quite likely there will soon be a lot of imitations as it usually happens with design thrends.

As you can see the readability is awful. On certain shades of gray the text is practically invisible. It also has a few technical limitations: the blur is gone the moment you use fixed positioning, z-index or transforms.

Solid ass
Solid ass
Solid ass
Solid ass

Obviously it has no refraction or specularity like the original.

Here's how it looks above images and text:

Solid ass
Solid ass
Solid ass
Solid ass

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin tincidunt arcu, egestas pellentesque erat euismod et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ut placerat justo. Curabitur commodo efficitur nisi id lacinia. Phasellus laoreet tincidunt sapien vitae suscipit. Suspendisse potenti. Ut et turpis blandit, semper nunc vel, dignissim ipsum.

Solid ass
Solid ass
Solid ass
Solid ass

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin tincidunt arcu, egestas pellentesque erat euismod et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ut placerat justo. Curabitur commodo efficitur nisi id lacinia. Phasellus laoreet tincidunt sapien vitae suscipit. Suspendisse potenti. Ut et turpis blandit, semper nunc vel, dignissim ipsum.

Solid ass
Solid ass
Solid ass
Solid ass