Background gradient + text color gradient

Question

https://codepen.io/Nonverbis/pen/vYJQvaw

<div class="gradient">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

.gradient {        
   background: rgb(5,75,113);
background: linear-gradient(90deg, rgba(5,75,113,1) 0%, rgba(5,75,113,1) 17%, rgba(255,255,255,0) 50%);        
  font-weight: bold;
  padding: 1rem;
}

I have organized a gradient background.

But I have failed to make a mirror gradient for the text.

I mean that over the dark blue background I'd like to have a white text but gradually transferring into blue one (rgb(5,75,113)).

Maybe you'll find this diagram useful:

I suppose that:

1. 0-25 % - white.
2. 25-35 % - blue, maybe with a white shadow.
3. 35 % - blue.

But this is my potshot. Please, organize the color of the second section as you find it suitable.

Answer 1

This applies the same gradient on the text, but in reverse (white, white, blue instead of blue, blue, white). It puts the text in a separate span element to give it its own background needed to apply the new gradient to. Then it clips the background to the text. To apply the gradient as a block instead of just the text, make the span an inline-block element:

.gradient {
  background: rgb(5, 75, 113);
  background: linear-gradient( 90deg, rgba(5, 75, 113, 1) 0%, rgba(5, 75, 113, 1) 17%, rgba(255, 255, 255, 1) 50%);
  font-weight: bold;
  padding: 1rem;
}

.gradient span {
  background: rgb(255, 255, 255);
  background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 17%, rgba(5, 75, 113, 1) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  display: inline-block; /* needed to apply gradient to block instead of text */
}

<div class="gradient"><span>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
</div>