INTRODUCTION

Hello 👋🏻 Dear readers hope you all are doing well, Today I will teach you how to create a cool text portrait 👨🏻‍💻 effect in CSS as you see in the cover image.

BASIC SETUP

Let's start with creating basic html structure.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Text Portrait</title>
    <style>

    </style>
</head>

<body>
    <p>
    </p>
</body>

</html>

Now lets get an image and place it in the same directory as the html file. I got this image from unsplash.com . Here is the link: https://unsplash.com/photos/PVZySuPXGWg

WRITING CSS

Now let's start writing some css codes to bring the image on the web page. But before that I will be adding some styles to the body and also I am using the Nunito font but you can use any font you like.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
    body {
            background: black;
            overflow: hidden;
            font-family: 'Nunito', sans-serif;
            line-height: 16px;
            font-size: 1.2rem;
    }
</style>

MAIN CSS

Here I am adding the image in paragraph tag so to bring the image to page firstly I need to add some content to p tag and I will use the lorem ipsum text for paragraph.

<p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum, sed laudantium. Earum expedita atque id excepturi minima aperiam deserunt consequatur cumque veritatis aliquam perferendis itaque praesentium velit nulla facilis beatae, et, quae asperiores nesciunt vero recusandae doloribus placeat, ab assumenda? Placeat sit ratione, architecto nisi veritatis dignissimos similique expedita facilis incidunt! Ea numquam eos assumenda facilis aliquam iure tempora adipisci qui culpa repudiandae rerum molestias, accusamus sint! Obcaecati aliquid accusantium cumque voluptas vero numquam voluptatibus quo, omnis eos laboriosam a, minus corrupti quae nulla, temporibus dolorum! Corrupti, a? Sequi sit aliquid consectetur reprehenderit dolorem, blanditiis laudantium sed at accusantium iste, non ullam quas totam tenetur laboriosam cum dolore necessitatibus cumque. Explicabo, mollitia? Quam asperiores autem cum saepe harum expedita magni hic veritatis minus sed, ipsa temporibus sequi vitae nemo excepturi animi et mollitia nulla! Nisi veritatis cumque iure adipisci, assumenda vero vitae natus minima harum rerum deleniti, corporis culpa omnis tempore, repellat qui placeat expedita est aut asperiores dolorem. Neque rem doloribus voluptatum, veritatis dicta a autem amet harum minus facilis nemo recusandae dolores inventore omnis quis, eum tenetur tempore magnam possimus mollitia distinctio! In aspernatur iusto perferendis suscipit vitae praesentium odit excepturi doloremque! Quidem a consectetur provident minima modi cum ratione iusto iste illum impedit non, voluptatum fuga, enim rem optio saepe necessitatibus dolorum maxime laborum praesentium animi distinctio atque ducimus aperiam? Rem voluptas reprehenderit natus ullam minus doloremque optio dolores dolorem. Molestias neque facilis laboriosam consectetur sequi quae fugiat quaerat ipsam id velit, a unde voluptatibus cupiditate! Expedita asperiores commodi labore exercitationem aliquam possimus minus est tempora a reprehenderit animi tempore sapiente minima culpa distinctio placeat, iure ducimus incidunt amet quae corrupti laborum. Quos obcaecati repellat ducimus, nemo similique nulla quia, autem repellendus a, numquam odio! Vel, animi! Nesciunt inventore dolorum modi nulla quisquam eos alias aliquid corporis nisi quia a, voluptatem atque ut voluptatum accusantium sint eligendi unde, neque quos beatae, omnis similique impedit. Modi asperiores eum, quaerat ipsum necessitatibus a in consequuntur. Dolor rem porro hic, fugit vel quisquam doloribus illo veniam nulla optio incidunt voluptate in. Sunt mollitia minima aut dolorum a maiores quam quas? Est architecto ut reprehenderit vero consectetur consequatur commodi, dolorem repellat totam amet perferendis ratione quibusdam impedit facilis atque quas deleniti ex distinctio maxime maiores voluptas cumque voluptatibus repudiandae. Nostrum similique aspernatur libero dolorem ipsam harum reprehenderit in cumque veritatis incidunt! Minus voluptatibus autem corrupti sunt, minima molestias, eius accusamus iusto reiciendis, libero obcaecati aspernatur. Maiores aperiam accusantium voluptas quasi eligendi vel distinctio. Quas veniam odit sint laborum, fugit, cum a nisi incidunt dolore autem repellendus ab assumenda, sunt mollitia similique deserunt corporis ea amet quod necessitatibus minus repellat. Tempore itaque omnis doloribus modi nam blanditiis nesciunt quam provident, totam odit vero incidunt enim est. Ad quo libero, possimus, eveniet explicabo omnis nisi cum quasi modi sed dolorem in placeat ratione atque, culpa et veniam eum consectetur quod ducimus? Facere, voluptas? A magnam optio libero dolore dolor sunt autem dolorum! Quia corrupti fuga magni rem incidunt, quam cum nobis cupiditate veritatis dolor repellendus nihil quidem quibusdam adipisci porro vel possimus excepturi! Mollitia corrupti iure quibusdam accusantium nihil nam totam molestiae eveniet commodi perspiciatis quis dolor molestias, deleniti eligendi, sequi vel! Ratione, perferendis facere? Repellendus dicta, eligendi repudiandae porro architecto at maxime incidunt explicabo tempore dignissimos vitae et ad placeat voluptatibus fugit neque velit maiores. Eius dolor possimus et placeat saepe, voluptate omnis ratione qui? Dolor blanditiis dolores vero vel saepe aliquid vitae harum iste doloremque, sit libero esse nemo dignissimos voluptas officia fugiat neque ullam consequatur minus ducimus velit sapiente. Nam quo dicta corrupti quasi optio, facere nesciunt consequuntur! Incidunt, quam placeat alias numquam aperiam possimus eos quaerat odio, doloribus magni molestias architecto ab non consequatur, expedita eius! Enim quia odit distinctio nam odio fuga, ea quod doloremque adipisci! Perferendis culpa minus tempora aspernatur, ducimus sunt id, fuga nesciunt provident aliquid illo facere ipsum aut quod? Quae quo vero fugit ipsam, tenetur rem dolores culpa veniam explicabo nulla nostrum labore, voluptatibus voluptate deserunt possimus soluta a? Fuga temporibus, ad a saepe totam exercitationem nam sequi veniam neque. Incidunt iste ratione, enim repudiandae quod ullam dicta quo, repellat voluptatem officiis veniam, sunt rem. Saepe magni laborum voluptatum explicabo accusantium optio natus aliquam esse porro blanditiis quas, dolorum omnis, voluptatem sapiente pariatur eligendi, doloribus tenetur hic aliquid ad totam reiciendis. Asperiores perspiciatis reprehenderit necessitatibus fugiat velit quia hic. Cumque, asperiores quisquam consectetur quidem rerum obcaecati soluta veniam! Facilis rerum debitis cumque! Laborum consequatur quod praesentium cumque voluptates aliquam! Ex, odio dolores eligendi corporis tempore quaerat commodi cum quos hic necessitatibus exercitationem unde modi facilis ad ducimus consectetur! Minus, nemo repellat quae quidem sint numquam excepturi delectus soluta quisquam velit cumque assumenda corrupti porro id commodi ad accusantium mollitia molestias aspernatur nesciunt maxime, culpa autem, odio iure? Aliquam officiis sint pariatur veniam minus cum neque quo. Nobis officiis dignissimos nostrum odio maiores excepturi dicta aut perferendis impedit, modi itaque voluptatem fugit mollitia neque, alias corporis placeat ea eligendi asperiores, repellat a debitis! Praesentium fugit suscipit commodi quam quos ipsam, nobis nisi officia inventore similique magni voluptatum porro accusantium ipsum alias voluptatibus aliquam, adipisci asperiores eveniet et tenetur. Debitis, ipsum eos enim reprehenderit voluptate possimus inventore tenetur, sit earum est cumque dignissimos incidunt consequatur nemo, rerum facilis dolor? Laudantium rem assumenda ipsa dolorum hic non, quis nisi rerum incidunt alias voluptas aliquam soluta exercitationem deserunt laboriosam iusto cupiditate vel quidem ut sint aspernatur id laborum. Veniam dicta eius alias odio autem illo dolore quia nobis aspernatur, quisquam dolores nihil magnam nostrum minima provident molestias voluptate harum omnis inventore voluptatum hic? Libero exercitationem rerum autem nesciunt, provident possimus voluptates placeat voluptatum eius. Ipsum, necessitatibus? Minima commodi esse repellendus est corrupti fugit alias nesciunt assumenda, a tenetur earum doloribus! Facere, consequuntur et provident quisquam, soluta necessitatibus totam quod itaque fuga dolor, quis qui? Sapiente numquam dolorum maiores earum tenetur sequi consequatur reprehenderit recusandae dicta ipsam beatae dolor voluptas rerum ad repellendus ipsum suscipit laborum explicabo, quod ut quia voluptates id? Totam voluptates quidem, aliquid ab quas tempora?
</p>

Here I named the image pic.jpg and placed in the same folder as the html file and then I will load it using css background-image property.

    p {
            background-image: url("pic.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: 80vh;
            background-position: center;
    }

If you check the output in webpage it should look like this.

Now for the final part we need to add two more properties i-e the background-clip and the text-fill-color to the paragraph tag.

        p{
            background-image: url("pic.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: 80vh;
            background-position: center;
            -webkit-text-fill-color: rgba(255, 255, 255, 0);
            -webkit-background-clip: text; 
        }

ENTIRE CODE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Text Portrait</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
        body {
            background: black;
            overflow: hidden;
            font-family: 'Nunito', sans-serif;
            line-height: 16px;
            font-size: 1.2rem;
        }

        p{
            background-image: url("pic.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: 80vh;
            background-position: center;
            -webkit-text-fill-color: rgba(255, 255, 255, 0);
            -webkit-background-clip: text; 
        }
    </style>
</head>

<body>
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum, sed laudantium. Earum expedita atque id excepturi minima aperiam deserunt consequatur cumque veritatis aliquam perferendis itaque praesentium velit nulla facilis beatae, et, quae asperiores nesciunt vero recusandae doloribus placeat, ab assumenda? Placeat sit ratione, architecto nisi veritatis dignissimos similique expedita facilis incidunt! Ea numquam eos assumenda facilis aliquam iure tempora adipisci qui culpa repudiandae rerum molestias, accusamus sint! Obcaecati aliquid accusantium cumque voluptas vero numquam voluptatibus quo, omnis eos laboriosam a, minus corrupti quae nulla, temporibus dolorum! Corrupti, a? Sequi sit aliquid consectetur reprehenderit dolorem, blanditiis laudantium sed at accusantium iste, non ullam quas totam tenetur laboriosam cum dolore necessitatibus cumque. Explicabo, mollitia? Quam asperiores autem cum saepe harum expedita magni hic veritatis minus sed, ipsa temporibus sequi vitae nemo excepturi animi et mollitia nulla! Nisi veritatis cumque iure adipisci, assumenda vero vitae natus minima harum rerum deleniti, corporis culpa omnis tempore, repellat qui placeat expedita est aut asperiores dolorem. Neque rem doloribus voluptatum, veritatis dicta a autem amet harum minus facilis nemo recusandae dolores inventore omnis quis, eum tenetur tempore magnam possimus mollitia distinctio! In aspernatur iusto perferendis suscipit vitae praesentium odit excepturi doloremque! Quidem a consectetur provident minima modi cum ratione iusto iste illum impedit non, voluptatum fuga, enim rem optio saepe necessitatibus dolorum maxime laborum praesentium animi distinctio atque ducimus aperiam? Rem voluptas reprehenderit natus ullam minus doloremque optio dolores dolorem. Molestias neque facilis laboriosam consectetur sequi quae fugiat quaerat ipsam id velit, a unde voluptatibus cupiditate! Expedita asperiores commodi labore exercitationem aliquam possimus minus est tempora a reprehenderit animi tempore sapiente minima culpa distinctio placeat, iure ducimus incidunt amet quae corrupti laborum. Quos obcaecati repellat ducimus, nemo similique nulla quia, autem repellendus a, numquam odio! Vel, animi! Nesciunt inventore dolorum modi nulla quisquam eos alias aliquid corporis nisi quia a, voluptatem atque ut voluptatum accusantium sint eligendi unde, neque quos beatae, omnis similique impedit. Modi asperiores eum, quaerat ipsum necessitatibus a in consequuntur. Dolor rem porro hic, fugit vel quisquam doloribus illo veniam nulla optio incidunt voluptate in. Sunt mollitia minima aut dolorum a maiores quam quas? Est architecto ut reprehenderit vero consectetur consequatur commodi, dolorem repellat totam amet perferendis ratione quibusdam impedit facilis atque quas deleniti ex distinctio maxime maiores voluptas cumque voluptatibus repudiandae. Nostrum similique aspernatur libero dolorem ipsam harum reprehenderit in cumque veritatis incidunt! Minus voluptatibus autem corrupti sunt, minima molestias, eius accusamus iusto reiciendis, libero obcaecati aspernatur. Maiores aperiam accusantium voluptas quasi eligendi vel distinctio. Quas veniam odit sint laborum, fugit, cum a nisi incidunt dolore autem repellendus ab assumenda, sunt mollitia similique deserunt corporis ea amet quod necessitatibus minus repellat. Tempore itaque omnis doloribus modi nam blanditiis nesciunt quam provident, totam odit vero incidunt enim est. Ad quo libero, possimus, eveniet explicabo omnis nisi cum quasi modi sed dolorem in placeat ratione atque, culpa et veniam eum consectetur quod ducimus? Facere, voluptas? A magnam optio libero dolore dolor sunt autem dolorum! Quia corrupti fuga magni rem incidunt, quam cum nobis cupiditate veritatis dolor repellendus nihil quidem quibusdam adipisci porro vel possimus excepturi! Mollitia corrupti iure quibusdam accusantium nihil nam totam molestiae eveniet commodi perspiciatis quis dolor molestias, deleniti eligendi, sequi vel! Ratione, perferendis facere? Repellendus dicta, eligendi repudiandae porro architecto at maxime incidunt explicabo tempore dignissimos vitae et ad placeat voluptatibus fugit neque velit maiores. Eius dolor possimus et placeat saepe, voluptate omnis ratione qui? Dolor blanditiis dolores vero vel saepe aliquid vitae harum iste doloremque, sit libero esse nemo dignissimos voluptas officia fugiat neque ullam consequatur minus ducimus velit sapiente. Nam quo dicta corrupti quasi optio, facere nesciunt consequuntur! Incidunt, quam placeat alias numquam aperiam possimus eos quaerat odio, doloribus magni molestias architecto ab non consequatur, expedita eius! Enim quia odit distinctio nam odio fuga, ea quod doloremque adipisci! Perferendis culpa minus tempora aspernatur, ducimus sunt id, fuga nesciunt provident aliquid illo facere ipsum aut quod? Quae quo vero fugit ipsam, tenetur rem dolores culpa veniam explicabo nulla nostrum labore, voluptatibus voluptate deserunt possimus soluta a? Fuga temporibus, ad a saepe totam exercitationem nam sequi veniam neque. Incidunt iste ratione, enim repudiandae quod ullam dicta quo, repellat voluptatem officiis veniam, sunt rem. Saepe magni laborum voluptatum explicabo accusantium optio natus aliquam esse porro blanditiis quas, dolorum omnis, voluptatem sapiente pariatur eligendi, doloribus tenetur hic aliquid ad totam reiciendis. Asperiores perspiciatis reprehenderit necessitatibus fugiat velit quia hic. Cumque, asperiores quisquam consectetur quidem rerum obcaecati soluta veniam! Facilis rerum debitis cumque! Laborum consequatur quod praesentium cumque voluptates aliquam! Ex, odio dolores eligendi corporis tempore quaerat commodi cum quos hic necessitatibus exercitationem unde modi facilis ad ducimus consectetur! Minus, nemo repellat quae quidem sint numquam excepturi delectus soluta quisquam velit cumque assumenda corrupti porro id commodi ad accusantium mollitia molestias aspernatur nesciunt maxime, culpa autem, odio iure? Aliquam officiis sint pariatur veniam minus cum neque quo. Nobis officiis dignissimos nostrum odio maiores excepturi dicta aut perferendis impedit, modi itaque voluptatem fugit mollitia neque, alias corporis placeat ea eligendi asperiores, repellat a debitis! Praesentium fugit suscipit commodi quam quos ipsam, nobis nisi officia inventore similique magni voluptatum porro accusantium ipsum alias voluptatibus aliquam, adipisci asperiores eveniet et tenetur. Debitis, ipsum eos enim reprehenderit voluptate possimus inventore tenetur, sit earum est cumque dignissimos incidunt consequatur nemo, rerum facilis dolor? Laudantium rem assumenda ipsa dolorum hic non, quis nisi rerum incidunt alias voluptas aliquam soluta exercitationem deserunt laboriosam iusto cupiditate vel quidem ut sint aspernatur id laborum. Veniam dicta eius alias odio autem illo dolore quia nobis aspernatur, quisquam dolores nihil magnam nostrum minima provident molestias voluptate harum omnis inventore voluptatum hic? Libero exercitationem rerum autem nesciunt, provident possimus voluptates placeat voluptatum eius. Ipsum, necessitatibus? Minima commodi esse repellendus est corrupti fugit alias nesciunt assumenda, a tenetur earum doloribus! Facere, consequuntur et provident quisquam, soluta necessitatibus totam quod itaque fuga dolor, quis qui? Sapiente numquam dolorum maiores earum tenetur sequi consequatur reprehenderit recusandae dicta ipsam beatae dolor voluptas rerum ad repellendus ipsum suscipit laborum explicabo, quod ut quia voluptates id? Totam voluptates quidem, aliquid ab quas tempora?
    </p>
</body>
</html>

FINAL OUTPUT

CONCLUSION

So that's how you can create a cool text-portrait effect in CSS using the background clip property. Hope you all enjoyed reading this ✌🏻.
P.S: This is my first ever blog post so feel free to provide some suggestions

How to create a Text Portrait effect in CSS

Comments (1)

More from this blog

Real-World Data Engineering: Healthcare Claims Pipeline Using AWS SNS, SQS, Snowpipe, and dbt

How I Built a Production-Grade E-Commerce Data Analytics Pipeline With AWS and Databricks

Deploying Kubernetes on AWS EC2: Infrastructure Management Made Easy for Data Engineers

Real-Time Data Engineering: Streaming Unstructured Data to AWS with Apache Spark

Amazon Q: The AI Chatbot Boosting Your Business to the Next Level

INTRODUCTION

BASIC SETUP

WRITING CSS

MAIN CSS

ENTIRE CODE

FINAL OUTPUT

CONCLUSION

Command Palette

Comments (1)

More from this blog

INTRODUCTION

BASIC SETUP

WRITING CSS

MAIN CSS

ENTIRE CODE

FINAL OUTPUT

CONCLUSION