Hi, there are you looking for a method to make this type of glass effect shown in the below image which is trending UI/UX in 2021. So stay tuned with this blog you are in right place, I will guide you so that you can also achieve this type of glass effect and use it in your website and enhance your user interaction.
- Here
I had made a complete video on glassmorphism just watch this video and you will
have a better idea about how it works!
- Step 1: So, without any further delay let's began with our html code. First create a html file in a folder, then just simply copy and paste the below code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link your css here -->
<link rel="stylesheet" href="css/main.css">
<title>glassmorphism</title>
</head>
<body>
<div class="glass"></div>
<div class="circle1"></div>
<div class="circle2"></div>
</body>
</html>
- Step 2: Now create main.css file and then simply copy the below code and paste in your css file:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image: url("/img/45976a91317ff559c80bbab3f47d36b6.png");
background-size: cover;
background-repeat: no-repeat;
}
.glass {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 500px;
height: 600px;
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
z-index: -1;
}
.circle1 {
position: absolute;
top: 50px;
right: 300px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
z-index: 1;
}
.circle2 {
position: absolute;
top: 30px;
right: 450px;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
z-index: 0;
}- Note: Don't forgot to change background image url in this blog I haven't attached the background image because it is easily available from google.com just search for ui backgrounds.
- Conclusion :-
- So why this happens, why
this classic effect occurs.
- It's simple as we add
a rgba(255,255,255,0.4) as the background of our div it makes our div
simply transparent.
- Then to create a glass
effect we added a CSS attribute backdrop-filter (Blur-type)
of value 5px, which will add our div a glass finish as simple as that.
- and you will have a great
glass effect ready to go just play with positions and you can also create
awesome UI/UX designs.
- Hope you will find this blog easy for more css tips and tricks do follow my blog and also follow my youtube channel as well.
0 Comments