background-clip:text trick. Apply a gradient to one or two key words while the rest of the headline stays solid.
Instead of a solid color for a heading or key word, the text itself is rendered as a gradient — flowing from one color to another. Extremely popular in AI/tech/SaaS websites because it adds visual interest to plain text without needing additional design elements. Often just one or two words get the gradient treatment.
Three CSS properties together. First, background: linear-gradient(...) on the text element. Second, background-clip: text clips the gradient to the shape of the text characters. Third, -webkit-text-fill-color: transparent makes the actual text color invisible, revealing the gradient through the text shape. Without all three, it doesn't work.
Stop shipping pretty pages that don't sell. Start shipping pages that earn their pixels.
Apply a gradient color effect to key words in the hero headline. The headline reads: 'Build websites that actually convert.' Make the word 'convert' a gradient from #667eea (purple-blue) to #f64f59 (coral-red). CSS: background: linear-gradient(135deg, #667eea 0%, #f64f59 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent. Wrap that specific word in a span with this class. The rest of the headline should be white (on dark background). Add a second gradient word in the subheading using a different gradient (green to cyan: #11998e to #38ef7d).