Dec 15, 2020
Create a Glassmorphic Credit Card with CSS
A quick, easy tutorial for creating CSS illustrations based on glassmorphism
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:
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.
The Card
First, put this HTML:
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:
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:
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:
Done!
Hope you liked it.
Happy Coding!😎
Resources
Design adapted from Sarah Newman
Originally published at https://dev.to on December 15, 2020.
