How to make glass... with CSS!
Published: 2024-05-10 21:01:34

## Glass <div> using CSS

---
__tldr__ : 5 lines of code are all that is need to achieve this effect. [click here](#quick-guide) to skip the __amazing__ explanation. :sad:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x90rp27hbem7vuhkmdf.png)

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. 

```html
<div id= "container">
  <h2> Fake Company, Inc. </h2>
  <h1> Login </h1>
  Email
<input type="text" class="form-control" placeholder="johndoe@gmail.com" 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 <i> 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. 

```CSS
#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 <div> using CSS add these properties. 

```CSS
#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

{% codepen https://codepen.io/connor-ve/pen/rNgNgqz %}

## 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!