How to make the bottom of a NgbModal to be transparent so that content beneath is visible through it

I have a very basic modal using NgbModal: https://stackblitz.com/edit/angular-ngbmodal-be7ia5uq?file=app%2Fmodal-component.ts

It is opened like this

But what I want is to make the bottom gradually fade/transparent such that the content below the modal is visible through the transparent part. I don't need an animation. The modal should have its bottom transparent once it is opened. Is this possible with some CSS?
Sorry, I couldn't figure out the way to generate the output image, but I hope my question was clear enough.

You need to overwrite the CSS for the @ng-bootstrap modal with:

1. Set .modal-dialog .modal-content background to transparent and remove the border.

2. Set .modal-header background color to white.

3. Set .modal-body background to achieve the background with gradually transparent at the bottom.

The below SCSS style will overwrite the existing @ng-bootstrap modal for the applied component only.

::ng-deep .modal-dialog .modal-content  {
  background: transparent;
  border: 0;

  .modal-header {
    background-color: white;
  }

  .modal-body {
    background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
  }
}

If you want this style to apply to all modals in your Angular app, move the styles to the global stylesheet.

.modal-dialog .modal-content  {
  background: transparent;
  border: 0;

  .modal-header {
    background-color: white;
  }

  .modal-body {
    background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
  }
}

Demo @ StackBlitz