I have been trying to make a simple bar which fades in and out. I am doing this via a three stop linear gradient. It is a pretty basic task, and I have tested it and found it functional in chrome, firefox, etc. When I preview my email, it appears correctly as well, however when I send out the email, the gradient does not appear (observed on mobile, outlook application, gmail client in firefox.)
For reference, my relevant code for this task was
<head>
#gradient{
background: -moz-linear-gradient(left, #e6e6e6 0%, #ff0000 50%, #e6e6e6 100%);
background: -webkit-linear-gradient(left, #e6e6e6 0%, #ff0000 50%, #e6e6e6 100%);
background: -o-linear-gradient(left, #e6e6e6 0%, #ff0000 50%, #e6e6e6 100%);
background: -ms-linear-gradient(left, #e6e6e6 0%, #ff0000 50%, #e6e6e6 100%);
width:400px;
text-align: left;
line-height: 1px;
</head>
<body>
<table>
<td id="gradient">
</td>
</table>
</body>
After a while troubleshooting this with no dice, I tried out a xmlns gradient instead, by putting in this code.
<table style="margin-bottom:10px">
<svg width="400" height="4" viewBox="0 0 400 4"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient">
<stop offset="5%" style="stop-color: #f3f3f3;"/>
<stop offset="50%" style="stop-color: #ff0000;"/>
<stop offset="95%" style="stop-color:#f3f3f3;"/>
</linearGradient>
</defs>
<rect width="400" height="4" style="fill: url(#gradient); stroke:#f3f3f3"/>
</svg>
</table>
.
Again, I found it functioning when I tested it as html, and again it works in the constant contact preview screen, however it does not function when emailed out. Oddly, the same situations did work when I used a two stop gradient instead of a three stop gradient. This means I could work around the issue by putting two two stop gradients back to back, however I am worried about different clients treating the space between the two gradients differently.
Any help would be appreciated.
