Glassmorphism in Html and CSS design

Hello everyone, in this post, we will learn how to claymorphism and glassmorphism design in HTML, CSS, and javascript. It has a unique design and it looks like a transparent color but actually not transparent. In the last post, we have created a Simple Landing page Html template free download.

Glassmorphism design in HTML:

This effect can be used for different things and different parts of the website. So, we have created a card design and it is made in claymorphism and glassmorphism design.

Glassmorphism in Html and CSS design

So, you can see in the image we have a unique design for the card. It has a small box on the left top side and it has a text option. You can add any type of text in this box according to your requirements. Below this, we have an option of image and it is related to the business or businessman or company. Then it has a text option in the bold heading.

So, the card has a round rectangular shape and the shape is round due to the CSS radius property. The background of the card has a solid color and you can replace it with another color or image. Let us see how to create this type of effect using Html, CSS, and javascript.

You might like it:

How to create glassmorphism in HTML?

We will create this type of effect in three steps. You need to follow these steps if you want to create this type of design for free.

Download a code editor for glassmorphism in HTML:

It will help you to write the code easily. Code editors have a lot of advantages that’s why you have to download a code editor for writing the code.

Source code of HTML:

It is known as a markup language and in this design, we have added the shape, text, and image using Html/. Skeleton is created with the help of HTML. The Html code for this design is given below and you have to use it. Create an Html file with a .html extension and then paste this HTML code into your file.

Source code of CSS:

It is a markup language and we use it to design our cards. Claymorphism and glassmorphism effect is created for this card using CSS properties. This effect is designed using CSS. Therefore, CSS helps us to design our website and we have designed our card using CSS.

Create a CSS file with a .css extension and then paste this code of CSS for card design. Then link both the files with each other.

Download source code:

Sometimes it is difficult for some people to connect both the files with each other and create the project completed without any error. For those, we have created a file and in this file, we have image and code files. Download this file from the below download source code button and your card design will be there.


The concept of glassmorphism is unique and beautiful. It gives a new touch to the design and makes it awesome. Create any section or design with the help of Html and CSS. Then apply glassmorphism effect to that design. The design or section be any card or form etc.

I hope you like this post. If you find it interested then share it. IF you have any type of query then feel free to ask in the comment section.

Thanks for reading this article.

Download Source CodeClick to Download
Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x