In this blog, you will learn how to add a glass effect with Html & CSS. You are going to learn this by building this simple project.

Add a glass effect with HTML and CSS

In this blog, you will learn how to add a glass effect with Html & CSS. You are going to learn this by building this simple project.

Preview:

Requirements:

  • Basic HTML & CSS knowledge
  • Basic Javascript(Optional. only required for the toggle effect)

I have already made a video about it on my channel. Please check this out for more explanation.

If you like this video, please like share, and Subscribe to my channel.

Let's start

Html code:

<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Glass effect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="image_container">
<img src="./media/photo.jpg" alt="" class="image" />
<div class="glass hidden"></div>
</div>
<div class="button_container">
<button class="toggle_button">
<span class="hide_or_show">Hide</span> the image
</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

Explanation:

  • A container to contain all the elements of the page.
  • Image container for the image.
  • An empty div with glass class is added to add the glass effect.
  • A button container with a button.
  • Button text Hide is wrapped up with a span tag. Text will be changed when we will click the button.

Result: Without CSS (Cules Coding)

Css code:

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
display: grid;
justify-items: center;
grid-row-gap: 3rem;
}
.image_container {
width: 50%;
align-self: end;
position: relative;
}
.image {
width: 100%;
}
.toggle_button {
padding: 1rem;
background: red;
border: none;
color: white;
width: 15rem;
cursor: pointer;
}
.toggle_button:focus {
outline: none;
}
.toggle_button:active {
transform: translate(0, 2px);
}
.glass {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.hidden {
display: none;
}

Result: with css

Explanation:

  • The container is taking the whole width.
  • The image container is only taking 50% width of its container. And the image itself is taking 100% width of its container.
  • The image container is position relative and the glass element is aligned with the image container using position absolute.

If you have confusion with Css position then you can watch this video.

  • The glass element is hidden with the hidden class.
  • The image and button are centered horizontally and vertically using css grid.
  • But the image and button are next to each other.
  • Some basic styles for Button.

Let's finally add the blur and it is very easy.

.glass {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
backdrop-filter: blur(10px);
}

Result: With effect

Explanation:

  • We have used backdrop-filter property to make it work.
  • We need to use the blur function for the value.
  • Inside the blur function pass any valid measurement value you want.

To read more about backdrop-filter, visit the docs

Note:

The backdrop-filter property will not work in firefox. If anyone knows how to fix that please let me know.

Let's add the toggle effect. Here we will use a little bit of javascript.

const toggleButton = document.querySelector('.toggle_button')
const glass = document.querySelector('.glass')
const hideOrShow = document.querySelector('.hide_or_show')
const hidden = 'hidden'
toggleButton.addEventListener('click', () => {
glass.classList.toggle(hidden)
if (glass.classList.contains(hidden)) {
hideOrShow.innerHTML = 'Hide'
} else {
hideOrShow.innerHTML = 'Show'
}
})

Result:

Explanation:

  • First, we have selected 3 elements.

    1. Toggle Button
    2. Gass element
    3. Hide or show text element inside the button
  • We have added an event listener to the toggle button to listen for the click event. The callback function will be called when the button will be called.

  • Then simply we will toggle the hidden class inside the glass element. This will toggle the glass effect.

  • Finally, we are checking if the hidden class is present or not. And we are just changing the text content of the button based on that.

And we are done. This is how we add a glass effect with vanilla HTML and css. That was easy, right?

Shameless Plug

I have made a video about how to build a carousel postcard with React, Material-UI, and Swiper.js. If you are interested you can check the video.

You can also demo the application form here

Screenshot of Insta Carousel

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

If you have any questions, feel free to contact me on any social media as @thatanjan. Stay safe. Goodbye.

About me

Why do I do what I do?

The Internet has revolutionized our life. I want to make the internet more beautiful and useful.

What do I do?

I ended up being a full-stack software engineer.

What can I do?

I can develop complex full-stack web applications like social media applications or e-commerce sites.

What have I done?

I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories.

Screenshot

Homepage

More screenshots

I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff.

Want to work with me?

I am looking for a team where I can show my ambition and passion and produce great value for them. Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostEverything you need to know about css variables
Next PostEverything you need to know about css position