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)