<div class="container">
  <div class="wrapper">
    <div class="vignetta" id="sfumatura"></div>
    <img src="https://www.dangeloweb.it/wp-content/uploads/2020/07/gradiente-radiale-effetto-vignetta.jpg">
  </div>

  <div class="wrapper hero">
    <h1>Qui il titolo</h1>
    <button class="pulsante" onclick="myFunction()">SFUMATURA ON/OFF</button>
  </div>
</div>

body{
  font-family:sans-serif;
}

h1 {
  font-size:45px;
  color:#222222;
}

.container {
  display:flex;
  width:100%;
  background:rgba(221,209,197,1);
}

.wrapper {
  position:relative;
  text-align:center;
  xwidth:50%
}

.hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.vignetta {
  position:absolute;
  top:0;
  left:0;
  width:400px;
  height:100%;
  background-image:
    radial-gradient(
      circle at center left,
      rgba(221,209,197,0) 40%,
      rgba(221,209,197,1) 80%
    );
}

img {
  width:400px;
  display:block;
}

.pulsante {
  background-color:#a45d2f;
  padding:14px 20px;
  border-radius:40px;
  font-weight: bold;
  color:#ffffff;
  border:none;
  cursor:pointer;
}

button:hover {
    background: #a36742;
}

button:focus {
    outline: none;
}

button:active {
    transform: scale(0.99);
}

function myFunction() {
  var element = document.getElementById("sfumatura");
  element.classList.toggle("vignetta");
}