Fading out text with CSS

<div>
 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
</div>
<div>
 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita cupiditate eligendi adipisci, quis doloremque laboriosam, explicabo sequi ut quam cumque voluptatem eaque saepe dolores illo autem vitae illum aliquid quod.</p>
</div>

body {
 color: white;
 line-height: 1.5;
}

p {
 --fade-start: 50%;
 mask-image: linear-gradient(to bottom, white var(--fade-start), transparent);
}
body {
 color: white;
 line-height: 1.5;
}

p {
 --fade-start: 50%;
 mask-image: linear-gradient(to bottom, white var(--fade-start), transparent);
}