CSS - fade or dissolve effect on header element

Question

$transBlue: #115fff;
$transBg: linear-gradient(to left, #d9f2fd, #ffffff);

.trans_top {
    top: 50px;
    background: $transBg;
    -webkit-mask-image: linear-gradient(
        180deg,
        white,
        rgba(255, 255, 255, 0)
    );
}
.trans_bottom {
    bottom: 94px;
    background: $transBg;
    -webkit-mask-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0),
        white
    );
}

Answer 1

background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 70%);

 

Answer 2

padding: 75px 12px calc(50px - 35px);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 10%, #fff 60%, #fff 100%);