Zeppelin

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.