<div class="container">
  <div class="txt">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eligendi veritatis autem, non enim iure tempora ut nam optio neque rerum reprehenderit saepe totam, perspiciatis porro quisquam itaque voluptates ducimus! Numquam veritatis consequuntur ullam
  </div>
</div>
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
background: linear-gradient(to bottom, rgb(8, 63, 227) 0%, rgba(84, 191, 255, 0.6) 100%);
}

.container {
  max-width: 400px;
  text-align: left;
}

.txt {
  font-size: 16px;
  text-transform: uppercase;
  box-decoration-break: slice;
  display: inline;
  line-height: 22px;

    mask: linear-gradient(
      to right,
      rgba(0, 0, 0) 0%,
      rgb(0, 0, 0) calc(100% - 100px),
      rgba(0, 0, 0, 0) 100%
    );

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.