How to change the color of the first few lines of a text with css?

Question

How can I change the color of the first few lines of text using css? Please check my snippet below, and all will be clear. I know that it is possible, but can't remember how... I have to be able to set a certain color for both halves.

.container{
  max-width: 300px;
}

h1 {
  position: relative;
  font-family: verdana;
  color: lightblue;
  text-align: left;
}

h1:after{
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 50%;
  background-color: rgb(255, 255, 255); 
  mix-blend-mode: difference;
}

<div class="container">
  <h1>This is a very very long text, that should be written in the same element, but with two different colors</h1>
</div>

@TemaniAfif this question is not duplicate. the marked questions are different. — doğukan, Aug 04 '20 at 10:43
@dgknca you solution confirm the duplicate, you are using the same technique as in the duplicate. What is the difference? I can add more duplicate if you want — Temani Afif, Aug 04 '20 at 10:44

score 3 · Accepted Answer · answered Aug 04 '20 at 10:32

No pseudo-element needed. You can make this with only background-image. I used some CSS variable to control easily.

.container {
  max-width: 300px;
}

h1 {
  --line-height: 1em; /* we should use line-height */
  --line-count: 3; /* you can change the line count */
 
  line-height: var(--line-height);
  background-color: lightblue;
  background-image: linear-gradient(red, red);
  background-size: 100% calc( var(--line-height) * var(--line-count));
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
   position: relative;
  font-family: verdana;
  text-align: left;
}

<div class="container">
  <h1>This is a very very long text, that should be written in the same element, but with two different colors</h1>
</div>

How to change the color of the first few lines of a text with css?

1 Answers1