Как сделать засветление под конец блока

.box { 
  margin: 0 auto; 
  width: 700px; 
  height: 100px; 
  overflow: hidden; 
  display: block; 
  position: relative; 
  box-sizing: border-box; 
} 
 
.box:after { 
  content: ''; 
  position: absolute; 
  width: 100%; 
  height: 110px; 
  background: linear-gradient(to top, white, rgba(0, 0, 255, 0)); 
  left: 0px; 
  bottom: 0px; 
}

<div class="box"> 
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя 
    Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х 
    годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p> 
</div>