Open In App
Related Articles

GlassmorphismUI Animation

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
                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>

                    

Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari


Last Updated : 25 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads