[CSS] linear-gradient를 활용한 fade out 효과

 

[fade 효과 적용 전/후]

 

 

element  {
    width: 100%;
}

element.faded {
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
}

element.faded:after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: linear-gradient(to top, white, white 10%, transparent);
    background-repeat: no-repeat;
    transition: all 500ms ease;
}