Размытие нижней части текста

.box {
    position: relative;
    width: 200px;
    height: 100px;
    overflow: hidden;
}
.q {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
}
.grad {
    background-image: linear-gradient(#ffffff82, #ffffffd9, #ffffff);
}

<div class="box">
У меня текст с фиксированной высотой и кнопкой, которая отображает текст полностью. Как мне сделать эффект размытия нижней части текста, чтобы он плавно переходил в фон?
<div class="q grad">&nbsp;</div>
</div>