Create a Glassmorphic Credit Card with CSS

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:

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

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);
}

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>

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

Logo
Chip

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;
}

This should produce something like this:

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>



.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;
}

You should arrive at this:

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>

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;
}

Done!

Play with the code on my 👉codepen🚀.

Hope you liked it.
Happy Coding!😎

Design adapted from Sarah Newman

Blog

Create a Glassmorphic Credit Card with CSS

Shounak Das

The Background

The Card

Join Our Newsletter. No Spam, Only the good stuff.

Related