Skip to content
Related Articles

Related Articles

Glassmorphism Card Hover Effect
  • Last Updated : 31 Dec, 2020

Glassmorphism is a modern way of styling web-elements of any web-page and providing a 3D as well as a glass effect. This animation effect can be easily generated by using HTML, CSS, and Vanilla-tilt JS. We can implement Glassmorphism using various CSS properties. It is used to add a glass effect to the given element and Vanilla-tilt JS is used to provide a tilt effect to the card.

Installation:

  • Before moving further, firstly we have to install the vanilla-tilt module, by running the following command in your project directory, with the help of terminal in your SRC folder or you can also run this command in Visual Studio Code’s terminal in your project folder.
    npm install vanilla-tilt
  • Vanilla-tilt JS can also be used using its CDN.

    https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js

HTML code: In this section, we will make the layout of the card.

index.html



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <div class="gfg">
        <div class="card">
            <div class="content">
                <h2>GeeksforGeeks</h2>
                <h3>Welcome</h3>
                <p>
                    Learn Data Structures Online At 
                    Your Own Pace With The Best Of 
                    Faculty In The Industry. The Best 
                    Data Structures Course Available
                    Online From Skilled And Experienced 
                    Faculty.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>

chevron_right


CSS Code: In this section, we will use some CSS properties to design the Card.

index.css

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        
    }
  
    body{
        display:flex;
        justify-content:center;
        align-items:center;
        min-height:100vh;
        background:green;
    }
  
    .gfg{
        position:relative;
        display:flex;
        justify-content:center;
        align-items:center;
        max-width:1000px;
        flex-wrap:wrap;
        z-index:1;
    }
       
    .gfg .card{
        position:relative;
        width:300px;
        height:300px;
        margin:60px;
        box-shadow:20px 20px 50px rgb(0,0,0,0.4);
        border-radius:15px;
        background:rgba(255,255,255,0.1);
        overflow:hidden;
        display:flex;
        justify-content:center;
        align-items:center;
        backdrop-filter:blur(6px);
    }
  
    .gfg .card .content{
        padding:40px;
        text-align:center;
        
    }
</style>

chevron_right


JavaScript Code: In this section, we will use Vanilla-tilt JS to provide a tilt effect to the card.

script.js

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    VanillaTilt.init(document.querySelector(".card"), {
        max: 40,
        speed: 800,
        glare:true,
        "max-glare":2.5,
    });
</script>

chevron_right


Complete Code: In this section, we will combine the above three sections to create a Glassmorphism Effect.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }
  
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: green;
        }
  
        .gfg{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1000px;
            flex-wrap: wrap;
            z-index: 1;
        }
           
        .gfg .card{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 60px;
            box-shadow: 20px 20px 50px rgb(0,0,0,0.4);
            border-radius: 15px;
            background: rgba(255,255,255,0.1);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(6px);
        }
  
        .gfg .card .content{
            padding: 40px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        <div class="card">
            <div class ="content">
                <h2>GeeksforGeeks</h2>
                <h3>Welcome</h3>
                <p>
                    Learn Data Structures Online At Your 
                    Own Pace With The Best Of Faculty In 
                    The Industry. The Best Data Structures 
                    Course Available Online From Skilled 
                    And Experienced Faculty.
                </p>
            </div>
        </div>
    </div>
    <script src="vanilla-tilt.js">
    </script>
      
    <script>
        VanillaTilt.init(document.querySelector(".card"), {
          max: 40,
          speed: 800,
          glare: true,
          "max-glare": 2.5,
        });
    </script>
</body>
    
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :