CSS Text Fading

Sometimes it’s necessary to display only part of the text when making a site. In order to make it clear to the user that the continuation follows, you can, for example, put an ellipsis or the link “read further”. But there is a very beautiful way to make the text fade out.
To make it clear what is at stake, I will immediately give an example .
Of all the material that I managed to find in a day, the simple and clear method described here most suited me . But it has a significant minus: the shadow is difficult to position and the side edges have to be separated using indents.
For those who are looking for an easy way to darken the text, here is a simple example.

So, we need only one block in which there will be text to be darkened:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

And just two CSS classes:

#textbox{
    max-height:100px;
    overflow:hidden;
    margin-top:-20px;
}
#textbox:before{
    content:"";
    display:block;
    height:20px;
    position:relative;
    top:80px;
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}

Now the bottom line:
Using the before pseudo-class, we create a small block with a gradient fill. By default, it is located at the top of the block with text. Using position: relative, move this block down so that it covers one (or several) of the last lines of text. All.

The advantages include:
- ease of implementation (use only css)
- highlighted text

Of the minuses:
- Does not work in IE up to version 9 inclusive (who would doubt it)
- Suitable for blocks with a fixed height