Fluent design shadow

box-shadow.css

.box-shadow--dark {
    color: rgb(255, 255, 255);
    background-color: rgb(31, 31, 31);
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px, rgba(0, 0, 0, 0.15) 0px 0.5px 1px;
    transition: all 0.333s ease-out 0s;
    border-radius: 4px;
}
.box-shadow--dark:hover {
    transform: translate3d(0px, -1px, 0px);
    box-shadow: rgba(0, 0, 0, 0.66) 0px 19px 43px, rgba(0, 0, 0, 0.54) 0px 4px 11px;
}

.box-shadow--light {
    color: rgb(80, 80, 80);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px, rgba(0, 0, 0, 0.05) 0px 0.5px 1px;
    transition: all 0.333s ease-out 0s;
    border-radius: 4px;
}
.box-shadow--light:hover {
    transform: translate3d(0px, -1px, 0px);
    box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px, rgba(0, 0, 0, 0.18) 0px 4px 11px;
}

.box-shadow {
    box-shadow: 0 21rem 87rem 0 rgba(42,44,58,.15), 11.737rem 22.074rem 32rem 0 rgba(129,165,238,.1);
}