How to create Glass Design Website by using Html & CSS

 How to create Glass Design Website by using Html & CSS




Html Coding


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glass Website</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main>
      <section class="glass">
        <div class="dashboard">
          <div class="user">
            <img src="avatar1.png" alt="" />
            <h3>Solo King</h3>
            <p>Pro Member</p>
          </div>
          <div class="links">
            <div class="link">
              <img src="twitch.png" alt="" />
              <h2>Streams</h2>
            </div>
            <div class="link">
              <img src="steam.png" alt="" />
              <h2>Games</h2>
            </div>
            <div class="link">
              <img src="upcoming.png" alt="" />
              <h2>New</h2>
            </div>
            <div class="link">
              <img src="library.png" alt="" />
              <h2>Library</h2>
            </div>
          </div>
          <div class="pro">
            <h2>Join pro for free games.</h2>
            <img src="controller.png" alt="" />
          </div>
        </div>
        <div class="games">
          <div class="status">
            <h1>Active Games</h1>
            <input type="text" />
          </div>
          <div class="cards">
            <div class="card">
              <img src="assassins.png" alt="" />
              <div class="card-info">
                <h2>Assassins Creed Valhalla</h2>
                <p>PS5 Version</p>
                <div class="progress"></div>
              </div>
              <h2 class="percentage">60%</h2>
            </div>
            <div class="card">
              <img src="spiderman.png" alt="" />
              <div class="card-info">
                <h2>The Hero is Spider</h2>
                <p>PS5 Version</p>
                <div class="progress"></div>
              </div>
              <h2 class="percentage">60%</h2>
            </div>
            <div class="card">
              <img src="sackboy.png" />
              <div class="card-info">
                <h2>The Start of Sackboy</h2>
                <p>PS5 Version</p>
                <div class="progress"></div>
              </div>
              <h2 class="percentage">60%</h2>
            </div>
          </div>
        </div>
      </section>
    </main>
    <div class="circle1"></div>
    <div class="circle2"></div>
  </body>
</html>






CSS coding:

*{
    margin0;
    padding0;
    box-sizingborder-box;
}
h1{
    color#426696;
    font-weight600;
    font-size3rem;
    opacity.8;
}
h2,p{
    color#658ec6;
    font-weight500;
    opacity.8;
}
h3{
    color#426696;
    font-weight600;
    opacity.8;
}
main{
    font-familysans-serif;
    min-height100vh;
    backgroundlinear-gradient(to right top#65dfc9#6cdbed);
    displayflex;
    align-itemscenter;
    justify-contentcenter;
}
.glass{
    backgroundwhite;
    min-height80vh;
    width60%;
    backgroundlinear-gradient(to right bottomrgba(255255255.7), rgba(255255255.3));
    border-radius2rem;
    z-index2;
    backdrop-filterblur(2rem);
    displayflex;
}
.circle1,
.circle2{
    backgroundwhite;
    backgroundlinear-gradient(to right bottomrgba(255255255.8), rgba(255255255.3));
    height20rem;
    width20rem;
    positionabsolute;
    border-radius50%;
}
.circle1{
    top5%;
    right15%;
    
}
.circle2{
    bottom5%;
    left10%;
}
.dashboard{
    flex1;
    displayflex;
    flex-directioncolumn;
    align-itemscenter;
    justify-contentspace-evenly;
    text-aligncenter;
    backgroundlinear-gradient(to right bottomrgba(255255255.8), rgba(255255255.3));
    border-radius2rem;

}
.link{
    displayflex;
    margin2rem 0rem;
    padding1rem 5rem;
    align-itemscenter;
}
.link h2{
    padding0rem 2rem;
}
.games{
    flex2;
}
.pro{
    backgroundlinear-gradient(to right top#65dfc9#6cdbed);
    border-radius2rem;
    colorwhite;
    padding1rem;
    positionrelative;
}
.pro img{
    positionabsolute;
    top-10%;
    right10%;
}
.pro h2{
    width40%;
    colorwhite;
    font-weight600;
}
.status{
    margin-bottom3rem;

}
.status input{
    backgroundlinear-gradient(to right bottomrgba(255255255.8), rgba(255255255.3));
    bordernone;
    width50%;
    padding.5rem;
    border-radius2rem;
}
.games{
    margin5rem;
    displayflex;
    flex-directioncolumn;
    justify-contentspace-evenly;
}
.card{
    displayflex;
    backgroundlinear-gradient(to left toprgba(255255255.8), rgba(255255255.5));
    border-radius1rem;
    margin2rem 0rem;
    padding2rem;
    box-shadow6px 6px 20px rgba(122122122.212);
    justify-contentspace-between;
}
.progress{
    backgroundlinear-gradient(to right top#65dfc9#6cdbed);
    width100%;
    height25%;
    border-radius1rem;
    positionrelative;
    overflowhidden;
}
.progress::after{
    content"";
    width100%;
    height100%;
    backgroundrgb(236236236);
    positionabsolute;
    left60%;
}
.card-info{
    displayflex;
    flex-directioncolumn;
    justify-contentspace-between;
}
.percentage{
    font-weightbold;
    backgroundlinear-gradient(to right top#65dfc9#6cdbed);
    -webkit-background-cliptext;
    -webkit-text-fill-colortransparent;
}







Watch A Video that how to use these coding to make an awesome web design