Одна из техник создания плавного затухания текста при переполнении блока — использование свойства overflow: hidden для контейнера и псевдоэлемента :after с градиентом, переходящим от прозрачного цвета к цвету фона контейнера. 1

Пример кода: 1

.fade-text {  position: relative;  overflow: hidden;  max-height: 100px;}.fade-text:after {  content: '';  position: absolute;  bottom: 0;  width: 100%;  height: 40px;  background: linear-gradient(to bottom, rgba(255,255,255,0), #FFF);}

Ещё один вариант — использование свойства background-clip: text для наложения изображения или градиента на текст, если используется фоновое изображение. 3

Для демонстрации и тестирования примеров в реальном времени можно использовать такие онлайн-площадки, как jsFiddle или CodePen. 1