My Favourite Text Gradients

Note: I am using -webkit prefixed styles for all three relevant rules to ensure that only browsers that implement all three will load the background gradient at all. I could use a proper polyfill and/or @supports, but honestly this creates more readable code. Non-webkit browsers have started using webkit prefixes too, so this code works on basically everything except Opera Mini if people let their browsers auto-update.

Note2: Most of the gradient disappears on thin line text on most of these (though sometimes a very subtle effect is what you might be going for.) Either bold or a heavy display font like copperplate works well. Gradient text does, however, tend to be easily visible on both light and dark backgrounds – if you choose the right colors. (Though check the contrast with a visual tool for colorblindness accessibility – automated accessibility checkers only check against the fallback color.)

Note3: Gradient text sometimes can’t be seen on highlight, particularly if you’ve set a custom highlight color, because the highlight is rendered in front of the background, which is where the gradient comes from. The fix for that is ::selection { -webkit-text-fill-color: currentColor; }

Fire Blood Tawnyfur Gunmetal Gold Forest

b.fire {
    color: crimson;
    background: -webkit-linear-gradient(crimson, goldenrod);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

b.blood {
    color: crimson;
    background: -webkit-linear-gradient(crimson, darkred);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

b.tawnyfur {
    color: saddlebrown;
    background: -webkit-linear-gradient(goldenrod, sienna);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

b.gunmetal {
    color: slategray;
    background: -webkit-linear-gradient( gray, darkslateblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

b.gold {
    color: darkgoldenrod;
    background: -webkit-linear-gradient(silver, darkgoldenrod, goldenrod);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

b.forest {
    color:darkgreen;
    background:-webkit-linear-gradient(yellowgreen,darkgreen,green);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}