how can I put gradients to text?

Answer 1

you can use multiple spans that are positioned on top of each other and assign a different height and color to each of them. Its really ugly coding wise, but it works

Answer 2

html:

<h1 class="Gradient">Sample Gradient Text (h1)
<span class="G1" aria-hidden="true">Sample Gradient Text (h1)</span>
<span class="G2" aria-hidden="true">Sample Gradient Text (h1)</span>
<span class="G3" aria-hidden="true">Sample Gradient Text (h1)</span>
<span class="G4" aria-hidden="true">Sample Gradient Text (h1)</span>
<span class="G5" aria-hidden="true">Sample Gradient Text (h1)</span>
</h1>

Answer 3

Gradient,
.Gradient .G1,
.Gradient .G2,
.Gradient .G3,
.Gradient .G4,
.Gradient .G5{
height: 28px;
position: absolute;
margin: 0;
top: 0px;
left: 0px;
color: #4a778b;
font-family: century gothic,helvetica,arial;
font-size: 23px;
font-weight: normal;
overflow: hidden;
}

Answer 4

Gradient{
position: relative;
}
.Gradient .G5{
height: 10px;
color: #81a4b4;
z-index: 6;
}
.Gradient .G4{
height: 13px;
color: #789eae;
z-index: 5;
}
.Gradient .G3{
height: 16px;
color: #6f96a6;
z-index: 4;
}
.Gradient .G2{
height: 19px;
color: #618a9c;
z-index: 3;
}
.Gradient .G1{
height: 22px;
color: #547f92;
z-index: 2;
}

Answer 5

Just write them, ok?

Answer 6

for CSS: .Gradient{
position: relative;
overflow: hidden;
height: 28px;
}