Text with Background Gradients and Text-Shadows

You can use gradients and the background-clip property to style text with a gradient background, but it's a bit trickier to put text-shadows on it. Totally doable, though, with ::after elements. If your text is within an element with a background colour or image, like the .wrapper div in this Pen, you'll find a knowledge of how z-index works helpful, too, to make sure the text-shadows appear in the right place.

Text Shadow Effect

Demo Tutorial

See the Pen by AnyaCraig (@AnyaCraig) on CodePen.

This awesome script developed by AnyaCraig. Visit their official repository for more information and follow for future updates.

Text with Background Gradients and Text-Shadows

You May Also Like

jQuery Plugins

AngularJs Plugins