How to Create a Glass or Frosty Effect with CSS

This article was first published on LearnHub

The frosted glass effect is a very excellent idea when creating websites as it is user-friendly and gives a good impression of the website.

This kind of design helps to keep the user staring at the element and makes them know the importance of that element.

This glass effect, also known as glass morphism, is now prevalent in recent user interfaces(UI) like the MacOs or WinOs, so you can bet that it is a trending effect for most designs.

A Frosted glass effect using CSS might seem hard in some cases but trust me, it’s straightforward if you follow the process accordingly.

This article will look at two ways to create and manipulate objects using this CSS glass effect.

You will create a credit card just like Hernandez’s design on dribble, using glass morphism. I’ll use codepen ( an online code editor) for my coding.

For us to do this, you would need to have the following:

1. Knowledge of HTML and CSS.
2. A Laptop or desktop which you would use in writing your codes
3. A code editor like sublime text or VS code. Of course, there are a lot of code editors out there, but I’d prefer you use these as it’s user-friendly and helps detect errors quickly.

The code repo can be found here

Open your Code editor and write your basic HTML structure like this with a title and heading on the document’s body.

if you have no idea about coding, you can check out this article on how to get started for beginners.

Now you create our rectangle with a div tag and class of credit card.

Style the body and heading of the document: In styling the document, you have to use your skills in CSS to design and make our website look attractive. Here you have to use the CSS property text-align center to centralize your text.

Also, you can specify the color of the text using the CSS property color and then set it to any color you want, for example, white.

In this next step, you have to design your Card, giving it a background color and shadow. The linear gradient gives the card an exciting look with just one color of different opacity.

Then Center your credit card using the margin. The 0% indicates the top and bottom, while the 25% pushes it to the center.

Next up, you create your circles to appear at the back of the Card.

Now design your circles, reshaping them with a border radius of 50% and gradient color to make the circles much more attractive.

Apply this effect to your other circles, each bigger than the former.

Position the circles using absolute positioning and make your Card stand in front of them using a z-index.

Make the Card stand in front of the circles using the z-index to push it forward.

Also, in the credit card style, you are to set a blurred backdrop filter property if you are using an image background. The backdrop filter applies filter effects directly on the background of an element and not on the element’s content.

Now add your content on the body of the credit card. First of all, your card details like name, card number, bank name e.t.c

And then the credit card logo.

Style the text and arrange them properly

Give the bank name margin-bottom to push the other texts, and then make the card number smaller than the rest.

Now you should have made this

The last step is very straightforward. You would create two circles intersecting using your already made card-yellow and card-red divs.

And now you have successfully created your frosted glass effect credit card using CSS.

Conclusion

In this article, you learned how to build a credit card glass effect using CSS, to get more insight into how you did this, you can check the resource below.

You can learn more about CSS Pseudo class and how to use them for your project here

Resource:

Codepen

CSS tricks