Применить box-shadow только для одной стороны

Как я понял, градиент требуется такого плана:

.hide { 
  position: relative; 
} 
 
.hide:after { 
  position: absolute; 
  bottom: 0;   
  left: 0; 
  height: 100%; 
  width: 100%; 
  content: ""; 
  background: linear-gradient(to top, rgba(255,255,255, 1) 10%,  rgba(255,255,255, 0) 80%); 
}

<div class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas itaque earum aspernatur nemo amet nostrum reprehenderit est eum, asperiores voluptate, reiciendis eaque laboriosam aliquam! Doloremque culpa magni, voluptatum voluptas?</div>

Так как, в примере ссылка на полный текст находится на одном уровне с текстом, то думаю надо обернуть видимую часть текста в отдельный блок. Например так:

....
$el.html('<div class="hide">' + textVisible + '</div>').append($afterLength).append($elTextHidden);
...

и уже к этому блоку применять стили. Например те, что я указал выше.

Соответственно, чтобы при клике на полный текст убирался градиент воспользуемся toggleClass() для смены класса и .siblings() для поиска нашего div относительно ссылки полный текст

....
$more.siblings('div').toggleClass('hide');

Итого, получим что-то такое: jsfiddle