CSS Tricks8

CSS Text Imaging Effect

by Soya Natsuki

HTML

<html>
  <head>
    <title>CSS Text Portrait Effects</title>
  </head>
  <body>
    <!-- Some Text -->
    <p>odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt quis lobortis sit amet, posuere vitae justo. Suspendisse interdum eros finibus ex ornare aliquet. Proin arcu risus, luctus et erat vitae, lacinia lacinia odio, tincidunt...

CSS

@import url('https://fonts.googleapis.com/css?family-Poppins:400,500,600,700,900');

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #000;
  text-align: center;
}

p {
  font-size: 10px;
  line-height: 10px;
  background: url('https://cdn.discordapp.com/attachments/462160742318211075/753132926966956043/2Q.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.1);
}