How To Make Text Portrait Effects Using CSS

In this article, we will learn how to create a text image portrait using CSS in a few simple steps. If you want to know, keep reading this article. We have listed all the steps you need to take. So let’s start designing a text image.

Here are the some simple steps yo make text portrait.

  1. Create an HTML document with the text “Welcome to”, to duplicate a word, using the JavaScript repeat () function as shown below the HTML code.
  2. To darken the background to make the image more attractive, use the background feature and set the background image using the url () function in CSS. To avoid photo duplication, set background duplication as non-repetition by placing the image in the center. For better visibility, reduce the space between the lines.
  3. In order to print the background with the text, we need to paste the text and add style features such as background size, font, etc.


<!DOCTYPE html> 
<html lang="en">
      <title>Text Portrait CSS</title>
         body { 
         background: black; 
         overflow: hidden; 
         font-family: "Segoe UI", sans-serif; 
         p { 
         line-height: 13px; 
         background: url( 
         -webkit-background-clip: text; 
         background-attachment: fixed; 
         background-repeat: no-repeat; 
         -webkit-text-fill-color: rgba(255, 255, 255, 0); 
         background-size: 70vh; 
         background-position: center; 
      <p id="portrait"></p>
         let str = "Wecome to "; 
         document.getElementById("portrait").innerHTML = str.repeat(500); 


Text Portrait Effects Using CSS


Leave a Comment

Your email address will not be published.