In this experiment I tried to create a glass text effect (refractive index) with CSS.
See the Pen Zeppelin by simurai (@simurai) on CodePen.
The refractive index effect is achieved by using two background images on top of each other. The underlying one get’s scaled down a bit and the top one get’s cutout by the text using
-webkit-background-clip: text. For the embossing effect a
-webkit-text-stroke with a low opacity is used.
Something to keep in mind, animating clippings, text-shadows, transparency can make your CPU spike. So the animation is not looped, only on hover.
This experiment is inspired by Trent Walton’s example.