Thread by @Prathkum

Hey👋🏼

Let's create this multilayer text effect using CSS in few simple steps🎨

Thread🧵

We will be using two key properties in order to make this illustration.

- background-image
- background-clip

If you're not familiar with these two, give them a small read

🔹developer.mozilla.org/en-US/docs/Web…

🔹developer.mozilla.org/en-US/docs/Web…

STEP 1:

Start with HTML structure. It's pretty easy, only one span element

STEP 2:

* Import your favorite font, I used "Poppins" for this
* Center your span elements and increase the font-size a bit

STEP 3:

* Create pseudo element of span i,e. ::before
* To make stroke in the text, we will use repeating gradient and border-clip property

* Hide pseudo element behind the span element so that we can animate on hover

STEP 4:

* Create same text effect using ::after pseudo element
* Just the angle of the strokes this time

STEP 5:

* Add hover selector on ::before and move the element 10px top and left
* Similarly move ::after element -10px top and left

That's all😍

wasn't it easy? Drop your creations below. I love to check them out.

SOURCE CODE:

codepen.io/prathamkumar/p…