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?


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)

Leave a Reply

Your email address will not be published. Required fields are marked *