How to create gradient text in CSS

I wanted to add a css text gradient to some parts of my site. It's well supported in modern browsers. Found this awesome pen and had to import it into my site 😍

How does it look?

mix-blend-mode

Part of the magic here is this CSS property (MDN Docs), which is well supported:

Then combine that with the good old pseudo selectors ::before

SCSS mixin

@mixin gradient-text($gradient, $bg : 'light') {
  @supports(mix-blend-mode: lighten) {
    display: inline-block;
    position: relative;
    
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      
      background: unquote($gradient);
      pointer-events: none;
    }

    @if ($bg == 'light') {
      color: #000;
      background: #fff;
      mix-blend-mode: multiply;

      &::before {
        mix-blend-mode: screen;
      }
    } @else {
      color: #fff;
      background: #000;
      mix-blend-mode: lighten;

      &::before {
        mix-blend-mode: multiply;
      }
    }
  }
}Code language: SCSS (scss)

How to use it?

If you want to support dark mode, you can use the prefers-color-scheme media query for that.

$color1: #faaa54;
$color2: #e23b4a;
$color3: #db0768;
$gradient: linear-gradient(to right, $color1, $color1, $color2, $color3);

.gradient-text {
   color: $color1; // fallback

   @include gradient-text($gradient, 'light');
}

@media (prefers-color-scheme: dark) {
 .gradient-text {
     color: $color1; // fallback

     @include gradient-text($gradient, 'dark');
  } 
}
Code language: SCSS (scss)