CSS - fade or dissolve effect on header element

0 votes
200 views
added Feb 6 in CSS by lcjr First Warrant Officer (11,930 points)
edited Feb 6 by lcjr
$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
    );
}

2 Responses

0 votes
responded Feb 6 by lcjr First Warrant Officer (11,930 points)
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 70%);

 

0 votes
responded Feb 6 by lcjr First Warrant Officer (11,930 points)
padding: 75px 12px calc(50px - 35px);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 10%, #fff 60%, #fff 100%);

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...