Button with half image and half blurry gradient smoothly merge

How to develop this button, i have done some work. but i'm having issue is blur and image cut line is clearly visible which is not require. i want to merge smoothly blended image and blurry gradeint. half image and half blurry gradient with no edge line. see design and current button work with cut lines

.blend-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 6rem;
  border: none;
  border-radius: 20px;
  overflow: hidden;

  /* bottom layer: your image */
  background: url("https://picsum.photos/300/300") no-repeat;
  background-size: 60% 100%;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

/* 1) Blur the right half  */
.blend-button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;


  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


.blend-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;

  background: linear-gradient(to left,
      rgba(112, 76, 52, 0.3),
      /* adjust to your “solid” color */
      rgba(112, 76, 52, 0)
      /* fully transparent */
    );
}


.blend-button span {
  position: relative;
  z-index: 1;
  text-align: center;
}

<button class="blend-button">
  <span>Testing</span>
</button>

Solution

You can use linear-gradient as a mask on your backdrop-filter pseudo element:

.blend-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 6rem;
  border: none;
  border-radius: 20px;
  overflow: hidden;

  /* bottom layer: your image */
  background: url("https://picsum.photos/300/300") no-repeat;
  background-size: 60% 100%;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

/* 1) Blur the right half  */
.blend-button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%; /* make it full-width */
  height: 100%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  mask: linear-gradient(to right, transparent 0, black 50%);
}


.blend-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;

  background: linear-gradient(to left,
      rgba(112, 76, 52, 0.3),
      /* adjust to your “solid” color */
      rgba(112, 76, 52, 0)
      /* fully transparent */
    );
}


.blend-button span {
  position: relative;
  z-index: 1;
  text-align: center;
}

<button class="blend-button">
  <span>Testing</span>
</button>