This should be used on elements w/ black backgrounds like in distinctstudios.com.np

Edge blur gradient.css

selector {
    --blur-width: 50px;    
    position: relative;

    /* blur edges */
    &:before,
    &:after {
        content: "";
        position: absolute;
        z-index: 10;
        width: var(--blur-width);
        top: 0;
        height: 100%;
        pointer-events: none;
    }

    &:before {
        left: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0));
    }

    &:after {
        right: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0));
    }
}
@media (max-width:767px) {
    selector { --blur-width: 25px; }
}