Как сделать такой текст с помощью CSS

p span:nth-child(2) { opacity: .8 }
p span:nth-child(3) { opacity: .6 }
p span:nth-child(4) { opacity: .4 }
p span:nth-child(5) { opacity: .2 }
p span:nth-child(n+6) { display: none }

<p>
  <span>Как сделать текст сбоку картинки через CSS?</span>
  <span>Как сделать такой строчно-блочный список с помощью css?</span>
  <span>Сделать текст бегущей строкой при наведении</span>
  <span>css: взаимное расположение блоков</span>
  <span>Как сделать слайдер с помощью перспективы css/js?</span>
  <span>Как сделать такой внешний border-radius?</span>
  <span>Как сделать такой элемент как в макете</span>
  <span>Как сделать такой ховер?</span>
</p>

#app {
  border: 1px solid;
  width: 300px;
}

span {
  display: block;
  -webkit-mask-image: linear-gradient(white, transparent);
}

<div id="app">
  <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus est natus debitis suscipit minus unde totam optio, nostrum tempore iusto voluptate ullam esse rem fuga cumque, saepe minima culpa perspiciatis aut cum ducimus, sit maiores laboriosam vel! Fugiat vitae rem, dignissimos eaque accusamus vel minima consequatur, doloremque, fugit officiis ipsam!</span>
</div>