How to make glass... with CSS!

Glass using CSS

---

tldr : 5 lines of code are all that is need to achieve this effect. click here to skip the amazing explanation. :sad:

One of the newer trends, I frequently see with websites and apps are log in screens or components with a Glass Effect. Overall the concept should be simple but when I first was learning CSS it took me a while to find a tried and true way to achieve this effect. In this article we are gonna to detail how to get a Glass Effect shown above to help you modernize your websites!

Basic setup

For this tutorial we are going to be focusing on the CSS mainly, but if you would like to follow in a local project, below I will show my HTML.

<div id= "container">
  <h2> Fake Company, Inc. </h2>
  <h1> Login </h1>
  Email
<input type="text" class="form-control" placeholder="[e-mail]" id="fullscreen-search-term" autocomplete="off" value="">
  Password
<input type="password" class="form-control" placeholder="Password" id="fullscreen-search-term" autocomplete="off" value="">
  <a href = "#">forgot password?</a>
  <button> Sign in </button>
    <div class = "center-text">
  or continue with
  </div>
  <div id= "box">
    <div>
      <i class="fa-brands fa-google"></i>
    </div>
    <div><i class="fa-brands fa-github"></i></div>
    <div>
      <i class="fa-brands fa-facebook"></i>
    </div>
  </div>
  <div class = "center-text">
  Dont have an account? <a href = "#">Register for free</a>
  </div>
</div>

This is a basic setup for a login screen, with no functionality, as it is purely esoteric. One thing to note is for the buttons on the bottom showing the logos for Google, GitHub and Facebook I do have font-awesome imported into the project. In my html the syntax for each is located in the class definitions of the tags.

There is no JS associated with my example, though keep in mind to make this work in a real world application you will need to add functions to the buttons and input fields.

CSS Styling

Within my code I have a decent amount of filler CSS to handle the formatting of this Login Screen. Mainly I am using display: flex; to format my elements, along with some padding and margin definitions. If you have any questions with flexbox or flex feel free to leave a comment, and I can do a dedicated post regarding that!

To achieve the glass effect focus on the #container id within my CSS portion. In my code below I have removed all formatting properties.

#container {
  /* Only Glass Effect Relevant Code */
  background-color: #c8c8c82c;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 1px 1px 5px 1px #13131354;
  border: 1px solid #e9e9e94f;
}

Lets break down each of the properties defined above :

background-color: #c8c8c82c;

Most are familiar with background-color, but using this property you are also able to add transparency to your div. In my example I chose to use hex to set my color and opacity, but rgba or hsla will suffice. For the desired effect you will want to set the main color to a white to grey (I prefer #c8c8c8 or rgb(200,200,200)) and an opacity around 30%.

-webkit-backdrop-filter: blur(5px)
backdrop-filter: blur(5px)

This is where you get that frosted glass look from your div. Adding a backdrop filter will impact the look of the elements behind your transparent div. Within that filter we set it blur the images 5px. Feel free to edit this px as a higher px will increase the blur.

box-shadow: 1px 1px 5px 1px #13131354;

To separate the login screen from the background a box-shadow will ad this depth. The first two px declaration handle the x and y offset of your box-shadow. For my current example I chose 1px as not to make it two distracting. Next the 5px represents the blur radius aka how much you want to blur the box-shadow. Lastly I have the color set with an opacity of roughly 30%.

border: 1px solid #e9e9e94f;

Lastly as a personal preference, adding a border to your glass element can give it a solid edge and add to the effect. I would use the same color you have chose for the background along with a similar opacity.

Using these 5 properties on your container you are able to make a glass-like element for your new project!

Quick Guide

In recap to add a glass effect to your

using CSS add these properties.

#container {
  /* Only Glass Effect Relevant Code */
  background-color: #c8c8c82c;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 1px 1px 5px 1px #13131354;
  border: 1px solid #e9e9e94f;
}

If you need a different color for your element please feel free to edit the first 6 numbers, without touch the opacity definitions.

Live Demo / Remake

Thank you for reading !

If you like my work or articles please leave a like and comment! Additionally if you would like me to cover any Web Development, Game Development, or Programming Topic let me know!