style.css

*{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.glass{
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(45deg,#D761B6,#61D6D7,#B887F2,#D4409F);
}
.glassmorphusm{
    width: 280px;
    height: 200px;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter:blur(1px);
    /* filter: grayscale(); */
    /* border: 1px solid #fff; */
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
    box-shadow: 1px 1px 20px 0px #0004;
}
.top{
    width: 100%;
    height: 40px;
    background-color: #43414278;
    position: relative;
}
.top::before{
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    background-color: #EF503E ;
    border-radius:50%;
    top:Calc(50% - 50% * 0.5);
    left:20px;
}
.top::after{
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    background-color: #30E610;
    border-radius:50%;
    top:Calc(50% - 50% * 0.5);
    left:40px;
}
.top-inner{
    width: 14px;
    height: 14px;
    background-color: #2A38CE;
    border-radius:50%;
    position: absolute;
    top:Calc(50% - 50% * 0.5);
    left:60px;
}