<div class="box">
  <h1>TEXT <br> TEXT <br> TEXT <br> TEXT </h1>
</div>

* {
  box-sizing: border-box;
}

body {
  --background: url(https://images.unsplash.com/photo-1584290867415-527a8475726d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=90) top left / cover;
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  min-height: 100vh;
  background: var(--background);
}

body::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(15px);
}

.box {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem calc(50% + 2rem) 2rem 2rem;
  background: var(--background);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  color: transparent;
}

h1 {
  font-size: 12vw;
}