style.css

*{
    margin : 0;
    padding : 0;
    box-sizing : border-box;
    font-family : 'Poppins', sans-serif;
}

body {
    display : flex;
    align-items : center;
    justify-content : center;
    min-height : 100vh;
    background : linear-gradient(45deg, #00a67f, #ca96f6);
}

.card {
    width : 200px;
    height : 200px;
    /* border : 1px solid red; */
    overflow : hidden;
    border-radius : 30px;
    transition : 1s;
}

.background{
    position : relative;
    width : 100%;
    height : 100%;
    background : radial-gradient(circle at 100% 110%, #fdeb82, #f78fad);
}

.logo{
    position : absolute;
    right : 50%;
    bottom : 50%;
    color : white;
    font-size : 1.5rem;
    transform : translate(50%, 50%);
    transition : 0.5s ease-in-out;
}

.box {
    position : absolute;
    padding : 10px;
    text-align : right;
    background : #ffffff63;
    border-top : 2px solid white;
    border-right : 1px solid white;
    border-radius : 10% 13% 42% 0%/10% 12% 75% 0%;
    box-shadow : #6464645d -7px 7px 29px 0;
    transition : 1s ease-in-out;
    overflow : hidden;
    cursor : pointer;
}

.box i{
    color : white;
}

.box::before{
    content : "";
    position : absolute;
    inset : 0;
    transition : 0.5s ease-in-out;
    opacity : 0;
}

.box1{
    width : 70%;
    height : 70%;
    bottom : -70%;
    left : -70%;
    transition-delay : 0s;
}

.box1::before{
    background : linear-gradient(60deg, #bc3d2f, #a16bfe);
}

.box2{
    width : 50%;
    height : 50%;
    bottom : -50%;
    left : -50%;
    transition-delay : 0.2s;
}

.box2::before{
    background : linear-gradient(60deg, #5583ee, #41d8dd);
}

.box3{
    width : 30%;
    height : 30%;
    bottom : -30%;
    left : -30%;
    transition-delay: 0.4s;
}

.box3::before{
    background : linear-gradient(60deg, #6de195, #c4e759);
}

.box4{
    width : 10%;
    height : 10%;
    bottom : -10%;
    left : -10%;
    transition-delay : 0.6s;
}

.box:hover .icon i{
    filter : drop-shadow(0 0 5px white);
}

.box:hover::before {
    opacity : 1;
}

/* hover */
.card:hover{
    transform : scale(1.1);
}

.card:hover .box{
    bottom : -1px;
    left : -1px;
}

.card:hover .logo{
    bottom : 40px;
    right : 40px;
}