DEMOs

// stylelint-disable function-parentheses-space-inside

#mask {
  @include flexbox(row, nowrap, center, flex-start);

  position: relative;
  width: 90vw;
  height: 50vw;
  max-width: torem(540px);
  max-height: torem(300px);
  overflow: hidden;

  .bg {
    height: 100%;
    mask: url('#masking');
    mask-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgba(0, 0, 0, 0)),
      color-stop(0.2, rgba(0, 0, 0, 1)),
      color-stop(0.8, rgba(0, 0, 0, 1)),
      to(rgba(0, 0, 0, 0))
    );
  }

  .blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 110%;
    height: 110%;
    filter: blur(25px);
    margin: -5%;
    z-index: -1;
  }
}