CSS Text Line Fade Out Effect Without Images

Rishabh

• 56462
• 11
• 0

Pure CSS3 text line fade out (at the end) effect without the use of any images. Yuri Sementsov came up with this idea. MBarvian also came up with a neat trick, which is using -webkit-mask-image along with linear gradients, although that would only work in Webkit Browsers like Chrome, Safari, etc. The original version has a wider range of browser support.

From the MDN Docs -

The -webkit-mask-image CSS property sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room