<div class="content">  
  <h1>Скрытый текст</h1>  
  <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой единственное жаренные имеет переписали имени свое, взобравшись которое, заголовок злых, она оксмокс. Текст переулка строчка ее то рекламных прямо имеет от всех сих использовало составитель ты скатился, она проектах которой они себя путь моей назад города текста, снова на берегу безорфографичный. Первую на берегу ручеек большого ты всеми предложения диких сих о буквенных рот злых города имеет решила силуэт ведущими, собрал переписали там!</p>  
</div>

<style type="text/css">  
  p {  
  color: #fff;  
  }  
   
  @supports (mix-blend-mode: screen) {  
  p {  
  mix-blend-mode: screen;  
  position: relative;  
  background: #000;  
  }  
  p::after {  
  background: -webkit-linear-gradient(top, transparent, #000 3rem) no-repeat bottom center/100% 100%;  
  background: linear-gradient(180deg, transparent, #000 3rem) no-repeat bottom center/100% 100%;  
  content: '';  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  pointer-events: none;  
  -webkit-transition: 0.5s ease-out;  
  transition: 0.5s ease-out;  
  }  
  p:hover::after {  
  background-size: 100% 0%;  
  }  
  }  
  /* Pen styling */  
   
  body {  
  background: #222 url(https://source.unsplash.com/yNGQ830uFB4/1600x900) 50% 50%/cover;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  font: 18px/1.5 'Roboto', sans-serif;  
  -webkit-box-pack: center;  
  -ms-flex-pack: center;  
  justify-content: center;  
  min-height: 100vh;  
  position: relative;  
  }  

  body::before {  
  background: #222;  
  content: '';  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  opacity: 0.5;  
  }  

  h1 {  
  font-size: 32px;  
  font-weight: 300;  
  }  

  .content {  
  color: #fff;  
  max-width: 600px;  
  text-align: center;  
  position: relative;  
  }  
</style>