it took me a while but i hope it will work for you :)

I changed it from linear-gradient to radial-gradient, the reason is because you can't get rounded shape with a linear-gradient.

Then I resized it a little bit so it looks almost the same as you showed us the screenshots, changed the background size to go off the screen , i tried to use % but it didn't work so instead of that i used viewport for both width and height.After that i changed the position so it goes out from the viewport range and on your :hover function just changed back the position so it fills up your div.

If you find the animation too slow, its because i put too big numbers into the viewport sizes, therefore if you want it to be faster, just change the transition value in your .feedback div to a smaller value.

https://codepen.io/qnecro/pen/PomdVLr

.feedback {
  display:flex;
  padding: 40px;
  background: radial-gradient(ellipse, 
#000 40%, #FA5C45 40%);
  background-size: 500vw 300vh;
  background-position: -392vw 50%;
  transition:all 2s ease;
}

.title__block {
  width: 50%;
}

form {
  display: flex;
  flex-direction: column;
}

.input {
  margin-bottom: 20px;
}

.feedback:hover {
  background-position: -288vw 50%;
}

h3 {
  color: #fff;
}

But be AWARE!

I made an Ellipse, so now it looks like this when you look at it from far away and you don't trigger your :hover function:

So when your :hover function triggers, you move the black Ellipse to the right side as the blue arrow shows you in your :hover function, you end up with this:

But if you change your viewport value to too big, it can end up looking like this:

Your div on the left side will be no longer covered by the black ellipse.

For you issue better away use pseudo-element like extra layer. And for input tags to set background: transparent.

.feedback {
  display: flex;
  padding: 40px;
  background-color: #fa5c45;
  position: relative;
  overflow: hidden;
}

.feedback::after {
  content: '';
  position: absolute;
  height: 300px;
  width: calc(100% + 300px);
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  border-radius: 0 300px 300px 0 / 0 250px 250px 0;
  transform: translate(-110%, -50%);
  transition: all 2s ease;
  z-index: 1;
}

.feedback:hover::after {
  transform: translate(0%, -50%);
}

.title__block {
  width: 50%;
  position: relative;
  z-index: 5;
}

form {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 5;
}

.input {
  margin-bottom: 20px;
  background: transparent;
  border: none;
}

.input[type='name'],
.input[type='phone'] {
  width: 100%;
  padding: 8px 0;
  color: white;
  border-bottom: 1px solid white;
}

::placeholder {
  color: white;
}

.feedback:hover {
  background-position: 0 100%;
}

h3 {
  color: #fff;
}

<div class="feedback">
  <div class="title__block">
    <h3>Оставьте заявку</h3>
  </div>
  <div class="form__block">
    <form>
      <input type="name" class="input" placeholder="Имя" />
      <input type="phone" class="input" placeholder="Телефон" />
      <input type="submit" class="submit" />
    </form>
  </div>
</div>