Какие существуют техники создания плавного затухания текста при переполнении блока?

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

Пример кода: sky.pro

.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 для наложения изображения или градиента на текст, если используется фоновое изображение. snipp.ru

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