How to add reflection effect to the text?

Good day!
Please tell me how to add reflection effect to the text? tried using before and after (using the title attribute), I tried using a span nested inside another span, and through the positioning, blur and scaleY . But it turns out a little something. The desired damping effect. To reflect only half of the text. how would starting from the base of the reflection and half fades. (seen in the image).
It would be really cool if it were cross-browser and adaptive( when you change the font size , the reflection changed similarly)
8a9cf23edee74c419ebaed34fbd7639a.jpg
July 4th 19 at 23:39
2 answers
July 4th 19 at 23:41
Solution
Duplicate element and add to it the styles

transform:
- scaleY
- translateY


mask-image:
- linear-gradient
and do not tell me(your proposed solution led me to a different path), clip-path to the pseudo-element to apply would be possible? - ashlee.Reichel67 commented on July 4th 19 at 23:44
July 4th 19 at 23:43
Solution
very cool!Thank you! - ashlee.Reichel67 commented on July 4th 19 at 23:46

Find more questions by tags CSSJavaScriptjQuery