The easiest way to make a glass effect in CSS 💎

Salute everybody, i hope y'all doing well.

Recently i have seen a lot of designs and websites using the glass effect which makes the website looks smoother 💎. So you might be wondering how have they done this effect.

Today i will show you the easiest way to use this effect in your project in 4 steps.

1- Create a new div

So first things first we create a new div in our html file and giving it a class name like so:

<div class="box">
  <button class="my-btn">Click me!</button>
<div>

2- Remove extra space

Secondly we go to our CSS file to remove all the extra space from the html elements.

* {
  margin: 0;
  padding: 0;
}

3- Center the content

Adding a beautiful background to the body & align our div to center.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("<https://images.unsplash.com/photo-1488718729626-53eaa41c0848?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=633&q=80>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;

Third step results

4- Add glass effect

Adding some styling & glass effect.

.box {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  backdrop-filter: blur(15px); /* glass effect */
}

Congrats 🎉🎊 you have created the glass effect successfully!
This is how the final result looks like ! 💯

For the "Click me" button here is the CSS:

.my-btn {
  cursor: pointer;
  padding: 15px 40px;
  background-color: black;
  color: white;
  border: none;
  outline: none;
  border-radius: 5px;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
}

🌐 Here is a link if you want to visit the whole code HERE.

Connect with me if you have any question.

👌 I hope this post helped you to create your own glass effect.

💖 If you find this post a bit useful let me know in the comment section.