4 ms·
Essentially, what this code does is: background: linear-gradient(to right, #007CF0, #00DFD8); -webkit-background-clip: text; -webkit-text-fill-color: tra
by cuddlecake 5y ago
Essentially, what this code does is:
background: linear-gradient(to right, #007CF0, #00DFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
- the background is the linear gradient
- background-clip makes the background only appear behind text
- text-fill-color changes the text's fill color. Not sure why text-fill-color is used, `color: transparent` seems to do the same.
If you want a non-react, reusable way:
.gt {
background: linear-gradient(var(--gt-direction), var(--gt-start-color), var(--gt-end-color));
-webkit-background-clip: text;
color: transparent;
}
Fiddle: https://jsfiddle.net/wmvhkrfe/16/ https://jsfiddle.net/wmvhkrfe/16/
This way you can add various CSS helpers for start-color (or set them manually via JS)