shape the notch with shaded colors using CSS -- Updated question with a better solution if you want to apply any borders to the notch

Question

Trying to shape the .notch with shaded colors using css and try not to disturb any other elements.

.cardContainer {
  height: 180px; 
  background-color: ghostwhite; 
  max-width: 400px;  
  overflow: hidden;
}
.notch {
 display: initial;
 width: 200px;
 height: 25px;
 float: right;
 background: linear-gradient(149deg, slategrey, slategrey 16%, coral 20%, coral 80%);
 transform: skewX(64deg);
 transform-origin: top right;
 box-shadow: 0 0px 3px 2px coral;
 border-left: 2px solid white;
 border-bottom: 1px solid white;
}
.content {
  display: flex;
  align-items: center;
  align-self: center;
  height: 138px;
  justify-content: center;
  width: 100%;
}

<div class="cardContainer">
  <div class="notch"></div>
  <div class="content">SAmple Card</div>
</div>

Answer 1

Try this out.

.cardContainer {
  height: 400px; 
  background-color: darkgray; 
  width: 400px;  
  align-self: center;
}
.notch {
  height: 15px; 
  width: 175px;
  float: right; 
  background-color: #30394A; 
  background: linear-gradient(20deg, darkgray 20%, rgba(0,0,0,0.3) 0),  linear-gradient(90deg, #676767 10%, #9a9a9a);
  box-shadow: 0 1px 0 0 rgba(204,221,255,0.15);
}
.content {
  display: flex;
  align-items: center;
  align-self: center;
  height: 100%;
  justify-content: center;
  width: 100%;
}

<div class="cardContainer">
  <div class="notch"></div>
  <div class="content">Sample Card</div>
</div>

Answer 2

.cardContainer {
  height: 400px; 
  background-color: darkgray; 
  width: 400px;  
  align-self: center;
}
.notch {
  width: 135px;
  background-color: #30394A;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(10.81deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 82.11%, rgba(48,57,74,0) 100%);
  box-shadow: 0 1px 0 0 rgba(204,221,255,0.15);
  float: right;
  border-top: 30px solid #30394A;
  border-left: 59px solid transparent;
  transform: skew(50deg);
  border-bottom-left-radius: 20%;
}
.content {
  display: flex;
  align-items: center;
  align-self: center;
  height: 100%;
  justify-content: center;
  width: 100%;
}

<div class="cardContainer">
  <div class="notch"></div>
  <div class="content">Sample Card</div>
</div>