Glass Morphism Effect
Glass Morphism Effect

Hy Guys, you always heared about glass morphism, some of you saw that but do you know how to describe glass morphism in UI Design and implement in real website. Today will will discuss about it!

What is Glass Morphism Effect?

Glassmorphism is a term used to describe UI design that emphasises light or dark objects, placed on top of colourful backgrounds. A background-blur is placed on the objects which allows the background to shine through – giving it the impression of frosted glass.

In simple words when we create a glass type effect ( controls light and dark view ) on any design that’s known as Glass Morphism Effect.

Table of Contents

Glass Morphism Effect Using CSS

index.html

<html>
  <head>
 	<link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
  	<div class="glass-panel">
	  <h1><a href="https://superdevresources.com/glassmorphism-ui-css/" target="_blank">Glassmorphism</a></h1>
	  <p>Glassmorphism is achieved using transparency and background blur to get a frosted-glass like effect.</p>
	  <div class="glass-toolbar">
	    <button class="glass-button">Glass Button</button>
	    <a href="https://superdevresources.com/glassmorphism-ui-css/" target="_blank" class="glass-button">Glass Link Button</a>
	  </div>
	</div>
  </body>
</html>

style.css

.glass-panel {
  color: #fff;
  margin: 40px auto;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  border-radius: 15px;
  padding: 32px;
  backdrop-filter: blur(10px);
}

.glass-button {
  display: inline-block;
  padding: 24px 32px;
  border: 0;
  text-decoration: none;
  border-radius: 15px;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(30px);
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
}

.glass-button:hover {
  background-color: rgba(255,255,255,0.2);
}
body {
  background: url(https://www.juliusbaer.com/fileadmin/_processed_/d/e/csm_2018-08-27_Top-10-modern_13c92a952b.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

.glass-panel {  
  max-width: 300px;
  height: 530px;
}

.glass-button {
  margin: 15px;
  margin-top: 40px;
}

h1, h1 a {
  min-height: 80px;
  width: 90%;
  max-width: 700px;
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
  text-decoration: none;
  color: #fff;
  padding-top: 30px;
  color: rgba(255,255,255,0.8);
}

p {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 32px;
  color: rgba(255,255,255,0.6);
}

Code is also abailable on Github Click Here!

If you like this blog please like, comment & share with your friends!

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply