DEV Community

loading...
Cover image for Create a Glassmorphic Credit Card with CSS
ReThink Programming

Create a Glassmorphic Credit Card with CSS

snkds profile image Shounak Das ・Updated on ・4 min read

Glassmorphism seems to be the new trend of the coming year, and it has become very popular among designers and developers. The main characteristics of this new trend are:

  • Transparency (frosted-glass effect using background blur)
  • Vivid background colors
  • A thin, light border (like the edges of a glass)
  • A light shadow.

Since all these characteristics produce a glassy look, it is, thus, named glassmorphism.

If you don't know how to produce a background blur, here are the steps:

  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).

Note:- backdrop-filter is not supported on Firefox and IE. However, it can be enabled on Firefox (may produce some glitches).

In this post, I will be showing you an example of how you can create glassmorphic, pure CSS illustrations.


I have used two Google fonts - Nunito and Josefin Sans. You can use either these, or any other font of your choice. Here is the <link> for these two:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

Just paste it in the <head> and you are ready to begin!

The Background

As I said, we should use bright colors for the background. I would be using a bright blue gradient.

body {
  background: linear-gradient(to left, #283593, #1976d2);
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

The Card

First, put this html:

<div class="card-group">
  <div class="card">
    <div class="logo"><img src="path/to/logo.png" alt="Visa"></div>
    <div class="chip"><img src="path/to/chip.png" alt="chip"></div>
    <div class="number">1234 5678 9012 3456</div>
    <div class="name">SHOUNAK DAS</div>
    <div class="from">10/19</div>
    <div class="to">06/21</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

We will be using two PNG's - one for the Visa logo, and the other for the credit/debit card chip. Use these images:

Now, add this CSS:

.card-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card {
  position: relative;
  height: 270px;
  width: 450px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(30px);  /* This will produce the blur */
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.logo img,
.chip img,
.number,
.name,
.from,
.to,
.ring {
  position: absolute; /* All items inside card should have absolute position */
}

.logo img {
  top: 35px;
  right: 40px;
  width: 80px;
  height: auto;
  opacity: 0.8;
}

.chip img {
  top: 120px;
  left: 40px;
  width: 50px;
  height: auto;
  opacity: 0.8;
}

.number,
.name,
.from,
.to {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 2px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.number {
  left: 40px;
  bottom: 65px;
  font-family: "Nunito", sans-serif;
}

.name {
  font-size: 0.5rem;
  left: 40px;
  bottom: 35px;
}

.from {
  font-size: 0.5rem;
  bottom: 35px;
  right: 110px;
}

.to {
  font-size: 0.5rem;
  bottom: 35px;
  right: 40px;
}
Enter fullscreen mode Exit fullscreen mode

This should produce something like this:

Alt Text

Cool. Isn't it? We can spice it up with few more lines of code.

First, I will add two circles behind the card. Add this html (before the card-group block) and css:

<div class="circles">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(#006db3, #29b6f6);
}
.circles {
  position: absolute;
  height: 270px;
  width: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-1 {
  height: 180px;
  width: 180px;
  top: -50px;
  left: -60px;
}
.circle-2 {
  height: 200px;
  width: 200px;
  bottom: -90px;
  right: -90px;
  opacity: 0.8;
}
Enter fullscreen mode Exit fullscreen mode

You should arrive at this:

Alt Text

Now, let's draw something on the card. After the to div (the last div inside .card), add another div having a class ring.

<div class="ring"></div>
Enter fullscreen mode Exit fullscreen mode

And this css:

.ring {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  background: transparent;
  border: 50px solid rgba(255, 255, 255, 0.1);
  bottom: -250px;
  right: -250px;
  box-sizing: border-box;
}

.ring::after {
  content: "";
  position: absolute;
  height: 600px;
  width: 600px;
  border-radius: 50%;
  background: transparent;
  border: 30px solid rgba(255, 255, 255, 0.1);
  bottom: -80px;
  right: -110px;
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Done!

Alt Text
Play with the code on my πŸ‘‰codepenπŸš€.

Hope you liked it.
Happy Coding!😎


Design adapted from Sarah Newman

Discussion (2)

pic
Editor guide
Collapse
yatharthvyas profile image
Yatharth Vyas • Edited

Great Work! Hats off

My lazy ass would have done this by an IMG tag but this is very inspiring

Collapse
snkds profile image
Shounak Das Author

Thanks πŸ™