Menu
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:

1<!DOCTYPE html>
2<html lang="eng">
3    <head>
4        <meta charset="utf-8" />
5        <meta name="viewport" content="width=device-width" />
6        <title>Glass effect</title>
7        <link rel="stylesheet" href="style.css" />
8    </head>
9    <body>
10        <div class="container">
11            <div class="image_container">
12                <img src="./media/photo.jpg" alt="" class="image" />
13                <div class="glass hidden"></div>
14            </div>
15            <div class="button_container">
16                <button class="toggle_button">
17                    <span class="hide_or_show">Hide</span> the image
18                </button>
19            </div>
20        </div>
21

22        <script src="index.js"></script>
23    </body>
24</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:

Css code:

1* {
2    padding: 0;
3    margin: 0;
4    box-sizing: border-box;
5}
6

7.container {
8    min-height: 100vh;
9    display: grid;
10    justify-items: center;
11    grid-row-gap: 3rem;
12}
13

14.image_container {
15    width: 50%;
16    align-self: end;
17    position: relative;
18}
19

20.image {
21    width: 100%;
22}
23

24.toggle_button {
25    padding: 1rem;
26    background: red;
27    border: none;
28    color: white;
29    width: 15rem;
30    cursor: pointer;
31}
32

33.toggle_button:focus {
34    outline: none;
35}
36

37.toggle_button:active {
38    transform: translate(0, 2px);
39}
40

41.glass {
42    position: absolute;
43    top: 0;
44    left: 0;
45    height: 100%;
46    width: 100%;
47}
48

49.hidden {
50    display: none;
51}

Result:

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.

1.glass {
2    position: absolute;
3    top: 0;
4    left: 0;
5    height: 100%;
6    width: 100%;
7    backdrop-filter: blur(10px);
8}

Result:

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.

1const toggleButton = document.querySelector('.toggle_button')
2const glass = document.querySelector('.glass')
3const hideOrShow = document.querySelector('.hide_or_show')
4

5const hidden = 'hidden'
6

7toggleButton.addEventListener('click', () => {
8    glass.classList.toggle(hidden)
9

10    if (glass.classList.contains(hidden)) {
11        hideOrShow.innerHTML = 'Hide'
12    } else {
13        hideOrShow.innerHTML = 'Show'
14    }
15})

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 an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

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