Search code examples
compatibilityopacitybackground-colornewsletterrgba

Does RGBA work with css inline for newsletter

I'm creating a newsletter and there are some colors which I would like to have some transparency. So, is it possible to use RGBA as a background-color?

Is it comptaible with all email readers?

Example:

<table cellspacing="0" cellpadding="0"> 
    <tr> 
     <td> 
      <hr height="1px" width="320px" style="border:none;background-color: rgba(235, 173, 21, 0.3);"></hr> 
     </td> 
   </tr> 
</table>
Solution

  • Can't use RGBA consistently in emails. One of the many quirks of email design is the way it recognizes color declarations both in CSS and in the old-style HTML tags.

    These work:

    • bgcolor=“#770000”
    • style=“color: #770000;”
    • style=“background-color: #770000;”

    Don’t use these:

    • style=“color: red;”
    • style=“color: rgba(215, 40, 40, 0.9);”
    • style=“color: #700;”

    All shorthand, color names, 3-digit HEX codes and RGBA values do not work consistently across all email clients.

    You’ll notice I made use of the bgcolor tag. You should use this old-style method to set the background on all your and elements - just like other old-style declarations such as width and border.

    A quick note about Gmail (not sure if this has been addressed since):

    Gmail has a quirk where it ignores #000000 (black) and #FFFFFF (white) in hyperlinks. Use #000001 and #FFFFF9 instead as a work around.