Skip to content
Related Articles

Related Articles

Improve Article

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :