DEV Community

CSS Frosted glass credit card

Chris Bongers on December 21, 2020

Today I wanted to try and recreate a super cool dribbble shot from Dede Dwiyansyah I came across. It's actually a Figma tutorial on how to creat...

Read full post

Victor Franco • Dec 21 '20 • Edited

One suggestion would be to wrap the entire backdrop-filter in @supports to avoid browser read failures.

@supports ((-webkit-backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%)) or (backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%))) {
  .card {
    &:before {
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
      content: '';
      height: 100%;
      position: absolute;
      width: 100%;
    }
  }
}

𒎏Wii 🏳️‍⚧️ • Dec 22 '20

  .card {
    &:before {

Is there any reason for nesting that? It seems weird as the original code wasn't nested and this literally does nothing other than decrease readability 🤷

João Ferreira • Dec 23 '20

I think nesting increases readability.

Sattwik Sahu • Jan 30 '21

Your suggestion is in Sass syntax, for anyone who's getting confused why there's nesting in it. Sass is actually like a much better version of CSS, just that you can do a lot more with it.

Chris Bongers • Dec 22 '20

I've seen that one, but it won't really fix it for the browser, it will just not have the whole effect then?

Madza • Dec 21 '20

great helper tool - glassmorphism.com

𒎏Wii 🏳️‍⚧️ • Dec 22 '20

Minor nitpick: The slider on that tool says "transparency", but turning it up makes it less transparent, so it should be labelled "opacity" instead.

Chris Bongers • Dec 21 '20

Oh nice, haven't seen that one around!

Lazar • Dec 21 '20

I'm on Firefox 84 and the blur isn't there at all.

Chris Bongers • Dec 21 '20

So for Firefox although it states it's supported the user needs to enable the flag.
By default, it's turned off

In firefox, you could open: about:config
And search for: backdrop -> Turn this value to true and restart firefox

In that case, it will work.
I expected it too work out of the box, going to update the browser support note

YusafS94 • Dec 21 '20

about:config

search for backdrop-filter and toggle to true

Chris Bongers • Dec 21 '20

Oh thanks for mentioning this I see!
Let me see what I missed 👀

𒎏Wii 🏳️‍⚧️ • Dec 22 '20

I wish backdrop-filter was more widely supported. It's such a nice effect for image lightboxes, semi-transparent menu bars, etc. etc. etc.

Chris Bongers • Dec 22 '20

Yeah exactly, but browser support goes quick these days so hopefully soon it will be a default to use one :)

Waylon Walker • Dec 21 '20

That blur is beautiful

Chris Bongers • Dec 22 '20

Thanks it's really nice, hopefully, all browsers will quickly support it

Timothy Huang • Dec 24 '20

Cool and impressive!!

Chris Bongers • Dec 24 '20

Thank you Timothy, glad you like it 🤟

Ridoan • Dec 21 '20

Nice animation though

Chris Bongers • Dec 21 '20

Thanks! Just a pity I had to put in the delay on the blue one

Matt Schuette • Dec 21 '20

Try a negative animation-delay.

Chris Bongers • Dec 21 '20

Legend! Totally forgot those were valid!

Ash • Dec 22 '20

Really enjoyed this post - learning CSS is my favorite coding hobby, and I learned a lot from this post. I'll be using bits and pieces of this in the future!

Chris Bongers • Dec 22 '20

Awesome, glad you're picking up little things.
I think that's the whole idea just knowing about them and once you need them you're going to be like; Oh yeah that was a cool thing.

ikurosaki • Dec 21 '20

Hermoso 😍

Phong Duong • Dec 23 '20

Cool tip. Thank you for sharing

Chris Bongers • Dec 23 '20

Thank you Phong, glad you liked it ✌️