CSS Gradient Text That Actually Works Cross-Browser

Gradient text -- where colors flow across letterforms -- is one of those CSS effects that looks impressive but has a non-obvious implementation. You cannot just apply a gradient to the color property. CSS gradients are background images, and getting them to clip to text requires a specific combination of properties that is not immediately intuitive. The technique .gradient-text { background : linear-gradient ( 90deg , #667eea , #764ba2 ); -webkit-background-clip : text ; background-clip : text ; -webkit-text-fill-color : transparent ; color : transparent ; } Here is what each line does: background: linear-gradient(...) creates a gradient background on the element. At this point, the gradient is behind the text, not on it. background-clip: text clips the background to only be visible within the text shapes. The gradient now fills the text glyphs. The -webkit- prefix is still needed for Safari and older Chrome versions. -webkit-text-fill-color: transparent makes the text fill transparent