add gradient to text css
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
text color as gradient css
.gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
text-color gradient css
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#f3ec78, #af4261);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
text gradient css3
h1 {
font-size: 72px;
background-image: linear-gradient(
110deg,
#463f64,
#463f64,
#e2285c
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Adding gradient to text color
h1 {
background: linear-gradient(
270.97deg,
#FFE580 -21.36%,
#FF7571 -2.45%,
#EA5DAD 26.84%,
#C2A0FD 64.15%,
#3BF0E4 108.29%,
#B2F4B6 159.03% );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Gradient text
.gradient-text {
display:inline-block;
background: black;
background: linear-gradient(135deg,red 50%,blue 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
|