Размытый последний параграф

Визуальный эффект размытого текста в последнем параграфе с помощью градиентов CSS3

by Andrey Dobrovoi

HTML

<div>
  <p>Интересный визуальный эффект плавно исчезающего текста в отдельном абзаце, выполненный с помощью градиентов CSS3</p>
  <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
  <p>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.</p>
    <p>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.</p>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic);
*, ::after, ::before {
    box-sizing: border-box;
}
html {
  min-height: 100%;
}

body {
  height: 100%;
  background-color: #ffffff;
  margin: 2rem;
  font-size: 100%;
}
div {
  color:#000;
  line-height: 1.4;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: normal;
  max-width: 500px;
  max-height: 100%;
  margin: 0 auto;
    background: -webkit-linear-gradient(bottom, rgba(47, 79, 79, 0), #2f4f4f 15em, #2f4f4f);
  background: linear-gradient(0deg, rgba(47, 79, 79, 0), #2f4f4f 15em, #2f4f4f);
  background-size: contain;
}

div:not(:root) {

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
div:not(:root):hover {
  -webkit-text-fill-color: inherit;
}