Thread by @Prathkum

You can create your text portrait using CSS in 5 simple steps. Let's see how

🧵👇🏻

Step 1: Setting up the HTML

Create a document with a lot of lorem ipsum text so that your webpage is covered entirely by the text

Step2: Set dark background-color

A dark background will make your portrait more appealing

Step3: Set the background image

This step is divide into 3 further steps

- Set background image
- Add background no-repeat for just one image
- Position your image in the center

Step4: Clip text

As you can see in the above step our text has disappeared. We need to clip our text so that background is painted with the foreground text.

p {
-webkit-background-clip: text;
}

Step5: Final touch

Reduce the line spacing a little bit and that's all 😀

Check out the full source code here

codepen.io/prathkum/pen/x…?

End of this thread. If you like it, give it a retweet it means a lot to me 💖