hac/src/components/gradient-card/style.scss

.hc-gradient-card-box {
    position: relative;
    .hc-gradient-card {
        position: relative;
        z-index: 2;
        border-radius: 6px;
        overflow: hidden;
        .hc-card-main {
            position: relative;
            flex: 1;
            z-index: 3;
        }
    }
    .hc-gradient-card-bg {
        position: relative;
        z-index: 2;
        text-shadow: 2px 3px 5px rgba(0,0,0,.1);
    }
    .hc-card-dot {
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        transition: all 0.6s cubic-bezier(.08,.82,.17,1);
        opacity: .3;
        &.hc-card-dot1 {
            width: 200px;
            height: 200px;
            left: 0;
            top: auto;
            right: auto;
            bottom: -150px;
            filter: hue-rotate(30deg)  brightness(160%);
        }
        &.hc-card-dot2 {
            left: -40px;
            top: auto;
            right: auto;
            bottom: -10px;
            width: 150px;
            height: 150px;
            filter: brightness(80%);
        }
        &.hc-card-dot3 {
            top: -60px;
            right: -60px;
            opacity: 0.6;
            width: 120px;
            height: 120px;
            filter: brightness(120%);
        }
    }
    .hc-gradient-card-bg {
        position: absolute;
        z-index: 0;
        width: calc(100% - 20px);
        height: 15px;
        bottom: -7px;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 5px;
        // filter: blur(10px);
        opacity: 0.2;
    }
    &:hover {
        .hc-card-dot1 {
            transform: translateX(-50px) translatey(-180px);
            filter:  hue-rotate(-30deg) brightness(80%);
        }
        .hc-card-dot2 {
            transform: translateX(150px) translatey(0px);
            filter: brightness(120%);
        }
        .hc-card-dot3 {
            filter: brightness(80%);
            transform: translateX(-150px) translatey(120px);
        }
    }
}