Create a Glassmorphic Credit Card with CSS

A quick, easy tutorial for creating CSS illustrations based on glassmorphism

Glassmorphism
  • Transparency (frosted-glass effect using background blur)
  • Vivid background colors
  • A thin, light border (like the edges of a glass)
  • A light shadow.
  1. Your background-color must be transclucent. You can either use rgba() or the 8-digit hexadecimal code (the last two digits being the opacity in %).
  2. For the blur, we need to use the CSS property backdrop-filter: blur(10px).

The Background

Blue gradient

The Card

<div class="ring"></div>
CSS credit/debit card

Resources

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shounak Das

I am a passionate programmer and tech-geek. I love to code, and teach coding to beginners.