Background Text Clip – Pure CSS 3

mask text
23rd Aug 2022
Development
3 mins reading time

A very pretty effect and definitely easy to apply.

01. Structure

To begin, we simply assign the .bg-tex class to an element with text

02. Style

To give the effect we simply give the bg-text a background-image with the url of the image we want to use as a mask.
After that we need to create the actual mask, so we give a background-clip: text;
As the last two steps we now give a color: transparent to the text and a background-repeat to not duplicate the image

03. Final Result

See the Pen Background Text Clip – Pure CSS – by MirkoDev.it by MirkoDev (@mirkodeveloper-the-bold) on CodePen.

See More..
August 22, 2022

Neon Text Effect - Pure CSS 3

01. Structure All you need to get started is a simple div with the class...

August 23, 2022

Background Text Clip - Pure CSS 3

A very pretty effect and definitely easy to apply. 01. Structure To begin, we simply...

Loading

Obsession beats talent, every time.