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

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



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

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

* 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

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

* 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.

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Pratham 👨‍💻🚀

Pratham 👨‍💻🚀 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

13 Jan
Learn CSS by playing games🎨

📌Grid Garden

🔹A game for learning CSS grid layout in 28 different levels


🔹Not a kind of game but here you will learn all about transform property in a more interactive manner

Read 6 tweets
11 Jan
Do you wanna grow on Twitter? ☘️

20 simple steps that will help👇🏻

1. Using your original profile picture is always an upperhand

2. Don't change your dp frequently. It may create difficulties for others to recognize you
3. Don't just tweet, interact with other people too.

4. Comment your original thoughts on other tweets and avoid short invaluable comments.
Read 12 tweets
11 Jan
Are you using bootstrap? These templates will help you

A Thread🧵
🔹Beautiful website templates and bootstrap themes using Bootstrap, the most popular HTML, CSS and JavaScript framework

🔗 bootstrapmade.com
🔹Free Bootstrap themes that are ready to customize and publish

🔗 startbootstrap.com
Read 6 tweets
10 Jan
Choosing the right color for your website is always a sensitive task. A good color scheme can

- Increases brand recognition
- highlights important website elements
- Influences how people feel about a website

Color palettes for web developers and designers🎨

A Thread🧵
📌 The super fast color schemes generator!

📌 280 handpicked colors

Read 9 tweets
10 Jan
Some amazing GitHub Repositories to learn React⚛️

🔸The code samples for Learning React by Alex Banks and Eve Porcello, published by O'Reilly Media

🔸A collection of awesome things regarding React ecosystem

Read 8 tweets
10 Jan
Some important topics of JavaScript from the interview point of view

Learning Resources 🧵👇🏻

🔗 w3schools.com/js/js_hoisting…


🔗 medium.com/javascript-sce…

Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!