Is it possible to create a color gradient background on cards that use a radial gradient?

Question

I want to make a card look like this

expected: the bg color is gradient (the green color behind img)

actual: in actual the bg color is not gradient, only accept one color(not gradient)

the color that i want is gradient linear-gradient(300deg, #6DBF67 1.06%, #A8DAA4 100%) but in actual i cannot make gradient. Is it possible to make gradient? I need radial-gradient & filter for the side of card looks like ticket card.

my code:

.App {
  font-family: sans-serif;
  text-align: center;
}

.flex {
  display: flex;
  align-items: center;
}

.section-left {
  width: 100%;
  height: 100%;
  max-width: 64px;
  max-height: 53px !important;
  min-height: 53px !important;
  background: radial-gradient(8px at left, #0000 98%, #6dbf67) left;
  background-size: 100% 64px;
  background-position: top -70px left;
  background-repeat: repeat-y;
  filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.1));
  border-radius: 8px 0 0 8px;
  /* padding: 10px 16px; */
}

.wrapper-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 100%;
  background: white;
  text-align: center;
  /* vertical-align: middle; */
  background-color: white;
  /* padding: 5px; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.section-right {
  width: 100%;
  height: 100%;
  max-height: 53px;
  background: radial-gradient(8px at right, #0000 98%, #fff) right;
  background-size: 100% 55px;
  background-position: top -1px right;
  background-repeat: repeat-y;
  filter: drop-shadow(3px 2px 3px rgba(0, 0, 0, 0.1));
  // box-shadow: 3px 3px 5px -1px rgba(0, 0,0,0.12);
  border-radius: 0 8px 8px 0;
  padding: 16px 12px;
}

.title {
  margin: 0;
}

<div className="container">
  <div className="flex">
    <div className="section-left">
      <div className="wrapper-img">
        <img src="https://d3hi9gzi0oybee.cloudfront.net/assets/e-commerce/icons/ic-otten-point.svg" width="21px" height="21px" />
      </div>
    </div>
    <div className="section-right">
      <div className="flex-sb">
        <h4 className="title">Title</h4>
      </div>
    </div>
  </div>
</div>

this is my sandbox, please take a look card-ticket. Thankyou

Answer 1

Use mask to create the circular cut then you can easily apply your other gradient:

.box {
  --r: 20px; /* radius of cut */

  height: 100px;
  margin: 10px;
  border-radius: 10px;
  -webkit-mask: radial-gradient(var(--r) at var(--r),#0000 97%,#000) calc(-1*var(--r));
  
  background: linear-gradient(red,purple);
}

<div class="box"></div>