Jump to content

Can you create the Liquid Glass effect, in CSS?


Recommended Posts

Hi all

This image is from Apple's new OS... and they called it Liquid Glass.

I was wondering if there is some smart CSS you could create to turn this effect, into a Button?

I know you can do blurring, but like this?  with that sort of edging.. I tried a box shadow but even with rgba background of the button, it doesn't show thru.

Love to see some ideas.

Screenshot 2025-06-10 at 08.19.14.png

There's been a name for this type of UI/window/panel effect for a while under the moniker of "glassmorphism".  So if you do some googling for that with css, you'll find a lot of different examples.

 

Here's one of many: https://codepen.io/kanishkkunal/pen/QWGzBwz

 

One thing to note is that most implementations make use of backdrop-filter, and you want to check caniuse for support.

 

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.