CODEWITHSUNDEEP
css
Kifsif
Kifsif

Reputation: 3843

Background gradient + text color gradient

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:

enter image description here

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.

Upvotes: 0

Views: 275

Answers (1)

KompjoeFriek
KompjoeFriek

Reputation: 3875

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>

Upvotes: 1

Related Questions