Header Ads

Glassmorphism Effect - New Trend of 2021 | webdevwithar.blogspot.com

Web Application Development Tutorials January 24, 2021


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.

Glassmorphism Effect Image


  • 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. 
Tags
Reactions

Post a Comment

0 Comments