<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop id="stop1" offset="0" stop-color="white" stop-opacity="0" />
<stop id="stop2" offset="0.3" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="500" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="500" height="200" fill="#480048" />
<rect x="0" y="0" width="500" height="200" fill="#C04848" mask="url(#Mask)" />
</svg>
html, body {
background: #000;
}
svg {
position: absolute;
top: 30px;
left: 50%;
margin-left: -250px;
}
TweenMax.fromTo("#stop1", 1.5, {
attr:{offset:-1}
}, {
attr:{offset:1},
repeat: -1,
yoyo: true,
ease:Linear.easeNone});
TweenMax.fromTo("#stop2", 1.5, {
attr:{offset:0}
}, {
attr:{offset:2},
repeat: -1,
yoyo: true,
ease:Linear.easeNone});
This Pen doesn't use any external CSS resources.