CSS Miscellany - Fade Out Background

css-misc-fade-out.css

// first approach
.parent {
    overflow: hidden;
    position: relative;
    height: 10rem;
}

.parent::after {
    content: "";
    position: absolute;
    bottom: -3rem;
    right: 0;
    width: 100%;
    height: 6rem;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 50%);
}


// second approach - put a fadeout above a div
.parent {
    box-shadow: 0px 0px 102px 110px rgba(255, 255, 255, 0.8), 0 0 10px 2px rgba(0, 0, 0, 0.6);
}

css-misc-fade-out.scss

// first approach
.parent {
    overflow: hidden;
    position: relative;
    height: 10rem;
    &::after {
        content: "";
        position: absolute;
        bottom: -3rem;
        right: 0;
        width: 100%;
        height: 6rem;
        background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 50%);
    }
}

// second approach - put a fadeout above a div
.parent {
    box-shadow: 0px 0px 102px 110px rgba(255, 255, 255, 0.8), 0 0 10px 2px rgba(0, 0, 0, 0.6);
}