<svg style="width: 0; height: 0; position: absolute">
  <filter id="inner-shadow" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
    <feComposite in="SourceAlpha" in2="blur" operator="out" result="shadow"/>
    <feFlood flood-color="#000" flood-opacity="0.5" result="color" />
    <feComposite in="shadow" in2="color" operator="in"/>
  </filter>
</svg>


<div class="text" contenteditable>
  Lorem ipsum
</div>

body {
  margin: 0;
  background: url('https://images.unsplash.com/photo-1604147706283-d7119b5b822c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1024&q=80');
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.text {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 25vw;
  text-align: center;
  filter: url(#inner-shadow);
}