Dear friends in this article we will tell you how to design glassmorphism card using html and css. So i hope you like our article because here you can get the source code free and this code you use in the projects. Guys if you learn more interesting articles then go to search bar and type article name then you can find easily more interested articles.
Table of Contents
Popular Articles
How to make progress bar using css?
How to make flipbook using css?
How to make portfolio website with dark mode enable or disable using javascript?
How to create avatar using css only?
How to Start?
First of all learn html, css for design this Glassmorphism Card and make a best ui project because css is the most important for any web designs. If you want to lean html, css then visit w3school website. It is a best site for learning programing languages and them get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready for make it.
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for glassmorphism card project make a fast with visual studio code editor.
HTML for Glassmorphism Card
Friends, now we will know how to write code for glassmorphism card in html. So let’s know that first you have to go to the body tag and inside that you have to take a div tag. Then we have to take it in the glass as well and we will keep the name of that class in the glass, after that we will take a h2 tag inside this class and take the title in it. Then we will take the span tag and write the position inside it, after that we will take the paragraph tag. Then in that we will describe about ourselves, then in the last we will take the anchor tag. And will make a Learn More button in it so that whoever clicks on it can get our complete information.
If you have any problem in reading, then you can copy and paste the source code of the html given below in your project so that your work can be even easier.
Source Code..
<div class="glass">
<div class="profile"></div>
<h2>CodeWithNizami</h2>
<span>I'm Web Developer</span>
<p>CodewithNizami Channel is all about creativity and innovative work in the field of Technology. We provide web development courses videos, MCS important videos and technology videos and articles....</p>
<a href="#">Learn More</a>
</div>CSS for Glassmorphism Card Design
Now we will know how to use css for make this Glassmorphism Card. So first of all you have to know how we use css. So let’s know how to use it. We use css in three ways, first we also use it inline. And secondly we also use it internally. Thirdly, we also use it externally. But we have used css internally in this design. For that you have to go to your head section. And you have to type style, then the style tag will come in front of you, then closing it also has to be done. After this you have to take * inside it, then open and close curly braces. Then add margin 0 padding 0 box sizing border box and last give the font family Merienda something like this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Now we will take the body tag and inside it we will set the width to 100% and the height to 100%. After that we’ll flex the display and center the justify content, then center the align items as well. After that we will keep the minimum height as 100vh. Then take an image in the background and center the position of the background. After that we will make background repeat no repeat. And then keep the background size covered, something like this.
body{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url(./bgforGlassCard.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Now we have to take a class with glass and in that we have to make the width 400px. And after that the height has to be made 500px. Then we have to take 1px from the border solid top and keep its color rgb. After that we will take 1px solid from the border left and save its color by keeping it rgb. Then we will take the background color rgba. After that we have to blur the background filter to 30px. And also give it a border radius of 10px. Then in the last we will save by giving 20px padding and something like this.
.glass{
width: 400px;
height: 500px;
border-top: 1px solid rgb(126,126,126);
border-left: 1px solid rgb(126,126,126);
background-color: rgba(0,0,0,0.1);
backdrop-filter: blur(30px);
border-radius: 10px;
padding: 20px;
}
Now we will take profit class and inside it we will give margin 10px from top, 0 from right, 0 from bottom and 30% from left. After that we will keep the width 150px and the height 150px. Then we’ll set the border radius to 50% and also we’ll take a background image to set in our profile. Then we will center the position of the background. And will keep the background size covered something like this.
.profile{
margin: 10px 0 0 30%;
width: 150px;
height: 150px;
border-radius: 50%;
background-image: url(./codewithnizami-1\ (1).png);
background-position: center;
background-size: cover;
}
Now we will take the h2 tag and center the text align in it. After that we will take color rgb then keep margin 20px from top. After that we will set the font weight to 400 then we will take the span tag and inside that we will keep the margin 10px from top and 0 from right to bottom and also 0 from left and 30% from left. After that we will put the color rgb for example.
h2{
text-align: center;
color: rgb(231,231,231);
margin-top: 20px;
font-weight: 400;
}
span{
margin: 10px 0 0 30%;
color: rgb(128,128,128);
}
Now we will take a paragraph tag and put margin inside it 10px from top to right and 0 to 30px from bottom and also 0 from left. After that we will justify the font size to 15px and the text align. After that we will use poppins in the font family, after that we will rgba the color, something like this.
p{
margin: 10px 0 30px 0px;
font-size: 15px;
text-align: justify;
font-family: ‘Poppins’, sans-serif;
color: rgb(0,0,0,);
}
Now we have to take anchor tag and in that we have to increase the font size to 15px. Then we will keep the color white, after that we will rgb the background and make the text decoration none. Then padding will give 12px from top and 25px from right and 12px from bottom then 25px from left. After that we will make the border 20px radius and then give the margin 31% from the left after that we will keep the transition 0.4s. Then we will hover the anchor tag and on hover we will keep the background dark something like this.
a{
font-size: 15px;
color: white;
background-color: rgb(57,0,133);
text-decoration: none;
padding: 12px 25px 12px 25px;
border-radius: 20px;
margin-left: 31%;
transition: 0.4s;
}
a:hover{
background-color: rgb(34,1,77);
}
CSS Source Code..
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Merienda', cursive;
}
body{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url(./bgforGlassCard.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.glass{
width: 400px;
height: 500px;
border-top: 1px solid rgb(126,126,126);
border-left: 1px solid rgb(126,126,126);
background-color: rgba(0,0,0,0.1);
backdrop-filter: blur(30px);
border-radius: 10px;
padding: 20px;
}
.profile{
margin: 10px 0 0 30%;
width: 150px;
height: 150px;
border-radius: 50%;
background-image: url(./codewithnizami-1\ \(1\).png);
background-position: center;
background-size: cover;
}
h2{
text-align: center;
color: rgb(231,231,231);
margin-top: 20px;
font-weight: 400;
}
span{
margin: 10px 0 0 30%;
color: rgb(128,128,128);
}
p{
margin: 10px 0 30px 0px;
font-size: 15px;
text-align: justify;
font-family: 'Poppins', sans-serif;
color: rgb(0,0,0,);
}
a{
font-size: 15px;
color: white;
background-color: rgb(57,0,133);
text-decoration: none;
padding: 12px 25px 12px 25px;
border-radius: 20px;
margin-left: 31%;
transition: 0.4s;
}
a:hover{
background-color: rgb(34,1,77);
}
