Feb 23, 2026

Not perhaps as equally as impressive as the color-mix function, but sometimes you need to fill a span of text with a gradient color. Not the background; the text itself. The tricky part here is in getting the clipping properties set correctly. CSS is so powerful these days.

.gradient-text {
  background: 
    linear-gradient(
      90deg, 
      var( --brand-purple ), 
      var( --brand-pink )
    );
  background-clip: text;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}