Css frosted glass | create css frosted glass using html css - codewithranom

Css frosted glass | create css frosted glass using html css - codewithranom

Css frosted glass | create css frosted glass using html css - codewithranom


Welcome🎉 to Code With Random blog. In this blog, we learn that how to create css frosted glass. We use HTML & CSS  for this simple css frosted glass. Hope you enjoy our blog so let's start with a basic HTML structure for a css frosted glass.

HTML code for css frosted glass

 <div class="drop-shadow">  
 <div class="glass"></div>  
  <span>GLASS</span>  
  </div>  
There is all HTML code for the CSS frosted glass. Now, you can see output without CSS, then we write CSS for css frosted glass.
Output
Css frosted glass | create css frosted glass using html css - codewithranom

CSS/scss for css frosted glass

 @import url('https://fonts.googleapis.com/css?family=Rajdhani:300&display=swap');  
 $blur: 20px;  
 $shadow-opacity: 0.30;  
 $image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg';  
 body, html {  
  height: 100%;  
  margin: 0;  
  padding: 0;  
 }  
 body {  
   display: flex;  
  justify-content: center;  
  align-items: center;  
  background-image: url($image);  
  background-size: cover;  
  background-position: center;  
 font-family: 'Rajdhani', sans-serif;  
 }  
 *, *:before, *:after {  
  box-sizing: border-box;  
 }  
 .glass {  
  height: 100%;  
  width: 100%;  
   background-image: url($image);  
  background-size: cover;  
  background-position: center;  
  clip-path: inset(10em);  
  filter: blur($blur);  
  display: flex;  
  justify-content: center;  
  align-items: center;  
 }  
 .drop-shadow {  
  height: 100%;  
  width: 100%;  
 filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, $shadow-opacity));  
  display: flex;  
  justify-content: center;  
  align-items: center;  
   &:before {  
   display: block;  
   content: "";  
   position: absolute;  
   top: 10em;  
    height: calc(100% - 20em);  
   width: calc(100% - 20em);  
    border-top: 2px solid rgba(225,225,225, 0.2);  
   border-left: 1px solid rgba(225,225,225, 0.1);  
    border-right: 1px solid rgba(225,225,225, 0.3);  
    z-index: 2;  
   // filter: blur(1px);  
  }  
  > span {  
   position: absolute;  
   z-index: 5;  
   color: white;  
   font-size: 4em;  
   letter-spacing: 0.75em;  
   padding-left: 0.375em;  
  }  
 }  
 @media (max-width: 980px) {  
  .glass {  
    clip-path: inset(5em);  
  }  
  .drop-shadow {  
   &:before {  
    top: 5em;  
    width: calc(100% - 10em);  
   }  
   > span {  
    font-size: 4em;  
   }  
  }  
 }  
 @media (max-width: 640px) {  
  .drop-shadow {  
   > span {  
    font-size: 2em;  
   }  
  }  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Output

Css frosted glass | create css frosted glass using html css - codewithranom

Css frosted glass | create css frosted glass using html css - codewithranom

Now we have completed our CSS section,  Here is our updated output with  CSSHope you like the css frosted glass, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a css frosted glass using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post