I need to fade paragraph from both top and bottom. But am able to fade from only either of the side.
HTML:
<p className="bottom-overflow-fade">
{content}
</p>
CSS:
.bottom-overflow-fade {
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.top-overflow-fade {
mask-image: linear-gradient(to top, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
}
Current Result:
Issue:
If I add both these classnames to the paragraph, the fade won’t work. If I use either one of them, then the fade works perfectly either for top and bottom. Is it possible to combine both these CSS properties in one, so that both the top and bottom fade works?
Note: I am not talking about any animation.
This is because of the nature of CSS. If you apply two declarations for the same property only one will preside! You can create a single class with a different linear gradient that starts transparent goes to black then ends transparent such as:
.top-bottom-overflow-fade {
mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}
EDIT
The question posed in the comments asks what the values are that are passed to the linear-gradient function:
to left top
or to right
) or with an angle of rotation. In CSS the units used to express angles can be in the form of deg
(degrees), turn
, rad
(radians), or grad
(gradians). The default direction is from top to bottom if none is supplied. Note that I didn't include this so the default direction is used.background-image
property's ability to stack multiple images (gradients are treated as background-images not background-colors)!