GlassmorphismUI Animation

Last Updated : 25 Dec, 2020

GlassmorphismUI which is a modern soft UI used in designing web elements, frames, and screens and is also a relatively new design trend that achieved great popularity these days and is surely going to be the next biggest trend in the upcoming days. Its aesthetic is marked by minimal and real-looking UI that’s sort of a re-advancement of the old NeomorphismUI design trend.

What makes it so special?

The use of saturated colors to make the transparency pop out.
Transparency(frosted-glass effects)
A subtle, light border on the transparent objects.

HTML code: The following is the HTML code that implements the Glassmorphism.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <title>Glassmorphism</title> 
    <link rel="stylesheet" href="index.css"> 
</head> 
  
<body> 
    <div class="rings"> 
        <div class="ring ring1"></div> 
        <div class="ring ring2"></div> 
    </div> 
  
    <div class="container"> 
        <div class="card"> 
            <div class="logo"> 
                <img src= 
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"
                alt="Visa"> 
            </div> 
            <div class="head">GlassmorphismUI</div> 
            <div class="name">RBBANSAL</div> 
            <div class="back"></div> 
        </div> 
    </div> 
</body> 
  
</html> 

index.css: The following code demonstrates the index.css file used in the above HTML code.

<style> 
    body { 
        /* fallback for old browsers */
        background: #0F2027; 
  
        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to right, 
            #2C5364, #203A43, #0F2027); 
  
        /* W3C, IE 10+/ Edge, Firefox 16+,  
        Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient(to right,  
            #2C5364, #203A43, #0F2027); 
    } 
  
    /* For Background circles */
    .ring { 
        position: absolute; 
        border-radius: 50%; 
  
        /* fallback for old browsers */
        background: #1f4037; 
         
        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient( 
            to right, #99f2c8, #366b5c); 
          
        /* W3C, IE 10+/ Edge, Firefox 16+,  
        Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient( 
            to right, #99f2c8, #366b5c); 
    } 
      
    .rings { 
        position: absolute; 
        height: 250px; 
        width: 470px; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
    } 
      
    .ring1 { 
        height: 180px; 
        width: 180px; 
        top: -50px; 
        left: -60px; 
    } 
      
    .ring2 { 
        height: 200px; 
        width: 200px; 
        bottom: -90px; 
        right: -90px; 
        opacity: 0.8; 
    } 
    /* For card */
      
    .container { 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
    } 
      
    .card { 
        position: relative; 
        height: 300px; 
        width: 450px; 
        border-radius: 25px; 
        background: rgba(255, 255, 255, 0.25); 
        border: 2px solid rgba(255, 255, 255, 0.1); 
        box-shadow: 0 0 80px rgba(0, 0, 0, 0.2); 
        overflow: hidden; 
    } 
    /* Making all card elements as absolute */
      
    .logo img, 
    .head, 
    .name, 
    .back { 
        position: absolute; 
    } 
      
    .logo img { 
        top: 35px; 
        right: 40px; 
        width: 80px; 
    } 
      
    .head, 
    .name { 
        color: rgba(255, 255, 255, 0.8); 
        letter-spacing: 2px; 
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); 
    } 
      
    .head { 
        left: 40px; 
        bottom: 65px; 
        font-size: 24px; 
    } 
      
    .name { 
        font-size: 12px; 
        left: 40px; 
        bottom: 35px; 
    } 
    /* The two rings on the card background */
      
    .back { 
        height: 500px; 
        width: 500px; 
        border-radius: 50%; 
        background: transparent; 
        border: 50px solid rgba(255, 255, 255, 0.1); 
        bottom: -250px; 
        right: -250px; 
        box-sizing: border-box; 
    } 
      
    .back::after { 
        content: ""; 
        position: absolute; 
        height: 600px; 
        width: 600px; 
        border-radius: 50%; 
        background: transparent; 
        border: 30px solid rgba(255, 255, 255, 0.1); 
        bottom: -80px; 
        right: -110px; 
        box-sizing: border-box; 
    } 
</style> 