Font gradients compatibility with all email clients

Question

I've been trying to add gradients to the font of certain words within a paragraph.

I've managed to add some code that works on a few email clients, but on Gmail it seems to change the background colour instead of the font colour, and makes the font itself white.

This is the code -

`<span bgcolor="#FFC839" style="color: #FFC839; background: -webkit-linear-gradient(180deg, #FFF06B 0%, #FFC839 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
    ">minimum 50€</span>`

Can I display font gradient on gmail and all email clients?

And if not, how can I remove the odd formatting its added but just in gmail for those specific words?

Thanks!

I tried adding gradient colours to text in html email code. Worked in some email clients but in others showed in background instead of on font.

Answer 1

Bad News: Text gradients using CSS in HTML emails is a not achieveable due to the inconsistent support for advanced CSS across different email clients, notably Gmail. The use of properties like -webkit-background-clip: text; and -webkit-text-fill-color: transparent; to achieve text gradients is not recognized by Gmail, which often leads to the text being rendered with a solid color or with unintended background styles.

Workaround: You can provide a solid color fallback to ensure text legibility across all clients. For branding elements where gradients are crucial, using images is a common but less accessible and slower-loading alternative.