<div class="toggle">
  <label>
    <input type="checkbox" checked>
    <span>Maskあり</span>
  </label>
</div>
<img src="https://picsum.photos/300/200" width="300" height="200" class="enabled">

img.enabled {
  mask-image: linear-gradient(
    rgb(0, 0, 0) 40%,
    rgba(0, 0, 0, 0)
  );
  mask-position: 0 0;
  mask-repeat: no-repeat;
}

html,
body {
  height: 100%;
}

html {
  font-family: system-ui;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background-image: linear-gradient(
    45deg,
    hsl(240deg 87% 9%) 0%,
    hsl(220deg 97% 10%) 21%,
    hsl(214deg 100% 12%) 30%,
    hsl(210deg 100% 13%) 39%,
    hsl(206deg 100% 15%) 46%,
    hsl(203deg 100% 17%) 54%,
    hsl(201deg 100% 18%) 61%,
    hsl(198deg 100% 20%) 69%,
    hsl(196deg 100% 21%) 79%,
    hsl(194deg 100% 22%) 100%
  );
}

.toggle {
  margin-bottom: 1rem;
}

const img = document.querySelector("img");
const checkbox = document.querySelector(".toggle input");

checkbox.addEventListener("change", ev => {
  if (ev.target.checked) {
    img.classList.add("enabled");
  } else {
    img.classList.remove("enabled");
  }
});