<div class="container">
<div class="txt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eligendi veritatis autem, non enim iure tempora ut nam optio neque rerum reprehenderit saepe totam, perspiciatis porro quisquam itaque voluptates ducimus! Numquam veritatis consequuntur ullam
</div>
</div>
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: linear-gradient(to bottom, rgb(8, 63, 227) 0%, rgba(84, 191, 255, 0.6) 100%);
}
.container {
max-width: 400px;
text-align: left;
}
.txt {
font-size: 16px;
text-transform: uppercase;
box-decoration-break: slice;
display: inline;
line-height: 22px;
mask: linear-gradient(
to right,
rgba(0, 0, 0) 0%,
rgb(0, 0, 0) calc(100% - 100px),
rgba(0, 0, 0, 0) 100%
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.