Home
Feed

Extend

Hashnode Pro
Hashnode for Agents

Resources

The foreword
Hashnode gql skill

Buildful - AI coding agent that delivers frontier-level results at a fraction of the cost Bug0 - The AI-native e2e QA regression testing Hackathons Changelog Brand @hashnode on X Hashnode on LinkedIn Support - hello+support@hashnode.com Code of Conduct Terms Privacy Sitemap

Sign in

Search Hashnode

Search posts, tags, users, and pages

Discussion

CSS Frosted glass credit card

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.comRead the article

#css
#css3
#frontend-development

#2articles1week

Written by

Chris Bongers

@dailydevtips · Cape Town, SA

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.

Responses4

Markdown supported · ⌘↵ to post

Supriya Shashivasan

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

Glassmorphism : Upcoming UI trendl

Chris Bongers

Hi Supriya,

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

Braydon Coyer

Very nice! Glassmorphism is really starting to trend!

Chris Bongers

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

This such a cool project! Good job

Chris Bongers

Thank you Eleftheria, glad you like it! ✌️

Syed Fazle Rahman

Great solution, Chris! 🙌

Chris Bongers

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

Dec 21, 2020