Apply a gradient as text color. background-clip and text-fill pattern.
/* Gradient as text color */
.gradient-text {
background: linear-gradient(90deg, #00d9ff, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* fallback for older browsers */
}background (gradient), background-clip: text, and -webkit-text-fill-color: transparent. -webkit- prefix needed for Safari.
Add color: transparent so non-supporting browsers don't show default text color. Gradient still visible where supported.
background: linear-gradient(90deg, cyan, blue); background-clip: text; -webkit-text-fill-color: transparent;