How to make a glass/blur effect overlay using HTML and CSS ?

To give a background blur effect on an overlay, the filter:blur() property is used with ::before pesudo element. The “filter:blur()” property gives the blur effect on the box or any element where it is desired and “before” is used to add the blurred background without applying any extra markup.

HTML Code: In this section, we will use HTML code to design the basic structure of the web page.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>
        How to make a CSS glass/blur
        effect work for an overlay?
    </title>
      
    <link rel="stylesheet" href=
</head>
  
<body>
    <section>
        <div class="layout">
            <h2>GeeksforGeeks</h2>
            <p>
                It is a computer science portal for geeks.
                It is a platform where you can learn and
                practice programming problems. It contains
                programming content, web technology content,
                and some other domain content also.
            </p>
  
            <button class="btn btn-outline-danger">
                Button
            </button>
        </div>
    </section>
</body>
  
</html>

chevron_right


CSS Code: In this section, we will use some CSS property to make a glass/blur effect overlay using HTML and CSS.

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    body {
        margin: 0;
        padding: 0;
    }
  
    section {
        position: relative;
        background: url(demo.jpg);
        background-attachment: fixed;
        height: 100vh;
    }
  
    section .layout {
        position: relative;
        top: 35%;
        left: 30%;
        max-width: 600px;
        padding: 50px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
        color: rgb(255, 254, 254);
    }
  
    section .layout::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(demo.jpg);
        background-attachment: fixed;
        filter: blur(8px);
    }
  
    section .layout h2 {
        position: relative;
    }
  
    section .layout p {
        position: relative;
    }
  
    section .layout button {
        position: relative;
    }
</style>

chevron_right


Combining Code: In this section, we will combine the above two sections code (HTML and CSS code) to make a glass/blur effect overlay.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>
        How to make a CSS glass/blur
        effect work for an overlay?
    </title>
      
    <link rel="stylesheet" href=
  
    <style>
        body {
            margin: 0;
            padding: 0;
        }
  
        section {
            position: relative;
            background: url(demo.jpg);
            background-attachment: fixed;
            height: 100vh;
        }
  
        section .layout {
            position: relative;
            top: 35%;
            left: 30%;
            max-width: 600px;
            padding: 50px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
            color: rgb(255, 254, 254);
        }
  
        section .layout::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: url(demo.jpg);
            background-attachment: fixed;
            filter: blur(8px);
        }
  
        section .layout h2 {
            position: relative;
        }
  
        section .layout p {
            position: relative;
        }
  
        section .layout button {
            position: relative;
        }
    </style>
</head>
  
<body>
    <section>
        <div class="layout">
            <h2>GeeksforGeeks</h2>
            <p>
                It is a computer science portal for geeks.
                It is a platform where you can learn and
                practice programming problems. It contains
                programming content, web technology content,
                and some other domain content also.
            </p>
  
            <button class="btn btn-outline-danger">
                Button
            </button>
        </div>
    </section>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.