---
title: "Discussion on \"CSS Frosted glass credit card\" | Hashnode"
description: "Discussion on \"CSS Frosted glass credit card\". Today I wanted to try and recreate a super cool dribbble shot from Dede Dwiyansyah I came across.\n\nIt's actually a Figma tutorial on how to create the frosted credit card effect. I decided to try and recreate this amazing shot in HTML! (With an own t..."
url: "https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [CSS Frosted glass credit card](https://h.daily-dev-tips.com/css-frosted-glass-credit-card?utm_source=hashnode&utm_medium=feed)

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 create the frosted credit card effect. I decided to try and recreate this amazing shot in HTML! (With an own t...

Dec 21, 2020 · 8 min read · h.daily-dev-tips.com  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#css3](https://hashnode.com/tag/css3)
-   [#frontend-development](https://hashnode.com/tag/frontend-development)
-   [#css-animation](https://hashnode.com/tag/css-animation)
-   [#2articles1week](https://hashnode.com/tag/2articles1week)

## Written by

[Chris Bongers](https://hashnode.com/@dailydevtips)

@dailydevtips · Cape Town, SA

  
[View profile](https://hashnode.com/@dailydevtips)

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.

## Responses 4

Markdown supported · ⌘↵ to post

[Supriya Shashivasan](https://hashnode.com/@omeal)

[Dec 22, 2020](https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91/comment/5fe1bc11a669d865551f66db)

I loved the tutorial. Good read!! I recently wrote an article on Glassmorphism. Would love your views on it.

[Glassmorphism : Upcoming UI trendl](https://omeal.hashnode.dev/glassmorphism-upcoming-ui-trend-ckiof3ss800x3qus144990qsl)

[Chris Bongers](https://hashnode.com/@dailydevtips)

[Dec 22, 2020](https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91/comment/5fe1bc11a669d865551f66db#reply-5fe1e4b1e28a2b6bca52b6bc)

Hi Supriya,

Nice article! Really hope this trend picks up, I like to see these effects even more in 2021

[Braydon Coyer](https://hashnode.com/@braydoncoyer)

[Dec 21, 2020](https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91/comment/5fe0bfb7fbf9845cf8bd7dc1)

Very nice! Glassmorphism is really starting to trend!

[Chris Bongers](https://hashnode.com/@dailydevtips)

[Dec 21, 2020](https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91/comment/5fe0bfb7fbf9845cf8bd7dc1#reply-5fe0c6db7cd4e55d1d465cf8)

It is! Just came to realize you need to manually set a flag still in Firefox for this to work. So they do support, but not out of the box.

[Eleftheria Batsou](https://hashnode.com/@eleftheriabatsou)

[Dec 21, 2020](https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91/comment/5fe0b16a2970e25b1c021974)

This such a cool project! Good job

[Chris Bongers](https://hashnode.com/@dailydevtips)

[Dec 21, 2020](https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91/comment/5fe0b16a2970e25b1c021974#reply-5fe0b2469c61645b41ca2b8e)

Thank you Eleftheria, glad you like it! ✌️

[Syed Fazle Rahman](https://hashnode.com/@fazlerocks)

[Dec 21, 2020](https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91/comment/5fe043111485f22e24b36ffa)

Great solution, Chris! 🙌

[Chris Bongers](https://hashnode.com/@dailydevtips)

[Dec 21, 2020](https://hashnode.com/posts/css-frosted-glass-credit-card/5fe0398eb78ac62dff80ea91/comment/5fe043111485f22e24b36ffa#reply-5fe046c9b78ac62dff80ec56)

Thanks Syed, glad you like it. One of my favorite effects and so amazing to see how accessible it is these days with CSS.