8

Any idea on how to change text color for 2 parts of gradient line? For example here if I want the blue part of the text ('s', 'o' and a part of 'm') to be black?

.button{
   background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
}

enter image description here

Boltosaurus
  • 2,138
  • 3
  • 21
  • 33
  • 2
    Maybe blend modes could help but other than that I don't think there is any pure CSS option for achieving this (unless you add a dupe element on top and style it differently). – Harry May 04 '16 at 07:23

1 Answers1

2

You can do it wrapping the text in a <p> tag and setting a linear-gradient to this tag.

button{
   background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
   color: white;
   font-size: 30px;
}

p{
  margin: 0;
  font-size: 50px;
  background: -webkit-linear-gradient(130deg, red 65%, black 15%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<button type="button"><p>some long text</p></button>
Francisco Romero
  • 12,787
  • 22
  • 92
  • 167