Is There An Easy Way To Contrast Text Over An Image Using Css?

I am trying to create this effect through code: Right now I am duplicating the text on top,'masking' it, and setting it to white, but It's becoming pretty complex and hard to cont

Solution 1:

For this particular case and since the width of the image is fixed, you can consider a simple gradient coloration for the text:

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px) 400px;
  grid-template-rows: repeat(4, 100px)
}

.image-block {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
  background: url('https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80')100%/ cover;
}

.intro-heading {
   background: linear-gradient(to right,#fff400px,#0000);
  width: 600px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  align-items: center;
}

<divclass="container"><divclass="image-block"><divclass="intro-heading"><h1class="intro-heading">Professional Makeup Artist & Hair Stylist</h1></div></div></div>

Similar questions:

Change text color to white on any non-white background

Text blended over background color

Change text color black to white on overlap of bg