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:
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
Top comments (2)
Great Work! Hats off
My lazy ass would have done this by an IMG tag but this is very inspiring
Thanks 🙏
Some comments may only be visible to logged-in visitors. Sign in to view all comments.