How to make glassmorphic navbar?

Question

Some websites have blur background navbar. How can such transparency effect be achieved with HTML & CSS?

score 2 · Answer 1 · edited Aug 10 '21 at 15:15

You can do this with two lines of CSS:

background: rgba(255, 255, 255, .4);
backdrop-filter: blur(10px);

If you run the fully-documented snippet I created below, you can see that I've made both the card AND the navbar part transparent. I also added the Stack Overflow logo underneath to display the glassmorphic effect. Because I used a Bootstrap navbar, there are two things to note:

You need to remove the default bootstrap navbar classes in order to apply these effects.
You need to change the Z-Index of the navbar if you want any design to show up underneath.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    
    <title>Glassmorphism effect by Billy for StackOverflow</title>
    <style>
        body {
            background: linear-gradient(90deg, #F38126 0, #32323A 25%); /* Apply a gradient background */ 
            font-family: 'Inter', sans-serif; /* Apply a different font */
        }

        .card {
            width: 400px; /* Width of the card */
            height: auto; /* Height of the card */
            border-radius: 1rem; /* Give the card round borders */
            padding: 2rem; /* Give the text inside the card spacing */
            margin: 2rem 4rem 4rem 5rem; /* Give the card spacing from the browser (Top, Right, Bottom, Left) */ 

            /* GLASSMORHPISM CODE */
            background: rgba(255, 255, 255, .4);
            backdrop-filter: blur(10px);
             /* GLASSMORHPISM CODE */
        }

        .card-title {
            margin-top: 0; /* Give the title spacing: top */
            margin-bottom: .5rem; /* Give the title spacing: bottom */
            font-size: 1.2rem; /* Make the title a little bigger than the text */
        }

        a {
            color: #32323A; /* Color the link at the bottom */ 
            text-decoration: none; /* Remove the default underline */ 
        }

        .shape {
            position: absolute; /* Position the shape */ 
            width: 150px;
            top: .5rem;
            left: 25rem;
        }

        .custom { 
            background: rgba(255, 255, 255, .4);
            backdrop-filter: blur(10px);
            z-index: 5; /* Make sure the image is behind the navbar, to show the effect */
        }

    </style>
</head>

<body>
    <nav class="navbar navbar-dark custom" >
        <span class="navbar-brand mb-0 h1">Navbar</span>
      </nav>

    <img class="shape" src="https://basedosdados.org/uploads/group/2020-07-08-180036.693735stackoverflow-512.png" alt="">

    <div class="card">
        <h3 class="card-title">Glassmorphism for StackOverflow</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit perferendis illum,
            placeat quod perspiciatis sequi ullam odit.</p>
        <a href="#">Read more</a>
    </div>
</body>

</html>

How to make glassmorphic navbar?

1 Answers1