Stunning Glassmorphism Credit Card With HTML & CSS

Copy it and get the same result as me.

7 min readNov 27, 2022

Hello, all! In this article, we’ll use HTML and CSS to create a debit or credit card with a glassmorphism effect.

In this beginner’s project, the programmer will learn about the Glass-Morphism Effect and how to create a virtual debit card that looks like a real card.

Before we begin our project, we must first understand the basics of glassmorphism, which we will do later in this post.

What exactly is glassmorphism?

Glassmorphism, a new design style, is now quite popular.

It is used by big businesses like Apple and Microsoft, as seen on websites such as Dribbble.

This trend’s main feature is a border and a semi-transparent background with a light shadow.

The background, on the other hand, has been blurred so that whatever is hidden behind it is effectively “transformed” into the element itself.

Everything makes sense, right?

I hope you have a basic understanding of the project.

This project will be covered in detail in our article.

Step 1: Add HTML Markup

<!DOCTYPE Html>
<Html Lang="En">

<Head>
    <Meta Charset="UTF-8" />
    <Meta Http-Equiv="X-UA-Compatible" Content="IE=Edge" />
    <Meta Name="Viewport" Content="Width=Device-Width, Initial-Scale=1.0" />
    <Link Rel="Stylesheet" Href="Style.Css" />
    <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">
    <Title>Glassmorphism Debit Card</Title>
</Head>

<Body>
    <Div Class="Circles">
        <Div Class="Circle Circle-1"></Div>
        <Div Class="Circle Circle-2"></Div>
    </Div>

    <Div Class="Card-Group">
        <Div Class="Card">
            <Div Class="Logo"><Img
                    Src="Https://Raw.Githubusercontent.Com/DasShounak/FreeUseImages/Main/Visa-Logo-PNG-Image.Png"
                    Alt="Visa"></Div>
            <Div Class="Chip"><Img Src="Https://Raw.Githubusercontent.Com/DasShounak/FreeUseImages/Main/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 Class="Ring"></Div>
        </Div>
    </Div>
</Body>

</Html>

Every good programmer should understand how to manage a codebase since it is just as important as creating the project itself.

The best way to organize the code is to create separate files for each language.

In this case, we’ll create two separate files, one for HTML and one for CSS, and link them together to get the expected results.

Because we used many fonts for our project, we must include links to those fonts in our header section for them to be included in our project.

<Link Rel="Stylesheet" Href="Style.Css" />
<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">

Giving Structure:

We’ll start by making a divider out of the class circle.
We’ll create two sub-divisions within our div, then use those sub-divisions to create two circles around our debit card to give it a glass-morphism effect.
The Card Logo and a Chip Picture Will Be Added To A Div We’ll Make With The Class “Card-Group” Inside Our Img> Tag.
The remaining card structure will be built with HTML block elements and CSS concepts.

Let Us Examine The Structure

Output:

Step 2: Putting CSS Code

Copy and paste the CSS code provided below into your stylesheet.

:Root {
  Font-Size: 24px;
}

Body {
  Background: #1488cc;
  /* Fallback For Old Browsers */
  Background: Linear-Gradient(To Left, #283593, #1976d2);
  Height: 100vh;
  Font-Family: "Josefin Sans", Sans-Serif;
}

/* Background Circles Start */
.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;
}
/* Background Circles End */

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

/* The Two Rings On The Card Background */
.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;
}

Step 1: Using the Body Selector and the Background Property, we will create a linear background for our body, with the height set to 100 Vh and the font family set to “Josefin Sans” using the Font-Family Property.

:Root {
  Font-Size: 24px;
}

Body {
  Background: #1488cc;
  /* Fallback For Old Browsers */
  Background: Linear-Gradient(To Left, #283593, #1976d2);
  Height: 100vh;
  Font-Family: "Josefin Sans", Sans-Serif;
}

Step 2: Now, we’ll create the circles for that using the class selector (.Circle).

We’ll also set the position to “absolute,” and we’ll use the Border Radius property to give our div the appearance of a circle by defining the border-radius to “50%.”

The Subclass Selector sets the position of both circles, and their width and height are set to 270 and 450 pixels, respectively.

/* Background Circles Start */
.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;
}
/* Background Circles End */

Step 3: Now we’ll style our card group. We’ll set its position to “absolute” and use the top and left properties to space it 50% from the top and 50% from the left.

The card has a light grey background and an edged look according to the border-radius property and height and width settings of 270 pixels and 450 pixels, respectively.

Moreover, we will verify that all of the card’s components are in an absolute position so that they all fit inside the card, and we will use the Class Selector to change their width and height, as well as the color of the text.

.Card {
  Position: Relative;
  Height: 270px;
  Width: 450px;
  Border-Radius: 25px;
  Background: Rgba(255, 255, 255, 0.2);
  Backdrop-Filter: Blur(30px);
  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;
}

/* The Two Rings On The Card Background */
.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;
}

You have now finished your Glassmorphism Debit Card in HTML and CSS.

I hope you got the overall effort. Let’s check out your live preview.

Output:

Now that we have successfully created a Glassmorphism Debit Card using HTML and CSS, we can go on to the next step.

This project may be used directly by copying it into your IDE.

I hope you understand the project. If you have any questions, please leave a comment!

If you found this blog helpful, please read my other blogs on Medium and follow me.

Stunning Glassmorphism Credit Card With HTML & CSS

Copy it and get the same result as me.

What exactly is glassmorphism?

Step 1: Add HTML Markup

Giving Structure:

Output:

Step 2: Putting CSS Code

Output:

Written by Rehan Pinjari

No responses yet