Как добавить эффект отражения тексту?

Question

[Константин]

Добрый день!
Подскажите, пожалуйста, как добавить эффект отражения тексту? пробовал через before и after (используя атрибут title), пробовал через span вложенный в другой span и через позиционирование, blur и scaleY . Но получается немного не то. Нужен эффект затухания. Чтобы отражалась только половина текста. как бы начиная от основания отражение и к половине затухает. (наглядно на изображении).
Было бы нереально круто если бы это было кроссбраузерно и адаптивно( при изменении размера шрифта , отражения изменялось аналогично)

Answer 1

[Vitaliy]

Дублировать элемент и добавить к нему стили

transform:
- scaleY
- translateY

mask-image:
- linear-gradient

Comments

[Константин]

а не подскажите(предложенное вами решение привело меня к другому пути), clip-path к псевдоэлементу применить можно будет?

Answer 2

[pcdesign]

https://jsfiddle.net/gy8mgkuo/16/

Comments

[Константин]

очень круто!Спасибо!