SVG gradient or filter

Question

I'm trying to reproduce the effect in this screenshot:

I created it in HTML + CSS, but now want to do it in SVG + CSS.

The current HTML code looks like this:

<div class="key mag " style="left:614px;top:182px;width:68px;height:68px;">
    <div class="caphgh">I</div>
    <div class="caprgt"></div>
    <div class="keyopt">Inventory</div>
    <div class="keyshf"></div>
    <div class="keyctl"></div>
    <div class="keyalt"></div>
    <div class="keyagr"></div>
    <div class="keyxtr"></div>
</div>

The current stylesheet code looks something like this:

.mag
{
    background:#E4A0DB; /* CIE-L*ch ( 74, 40,330) */
    background-image:-webkit-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
    background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
    background-image:linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
    background-size:72px 72px;
}

Also, I don't know beforehand what the base color is going to be. It could be magenta, red, or one of several other colors.

I'm not sure how to do this in SVG, and would appreciate some help. Thank you.

[edit]

I just experimented with creating a new mask for each rectangle in PHP using customized code. This is as opposed to keeping a single mask in defs and repeatedly using it.

This works in Chrome and IE if you give each mask a different ID. But this means I can't use the mask:url(#Mask); CSS property, and thus a "pure" CSS solution.

[edit]

Per Paul's suggestions, I have created a rectangle like this:

<svg fill="#ff0000">
    <rect x="0.5" y="0.5" rx="4" ry="4" width="50" height="50" fill="url(#grad_3)"/>
</svg>

I also have a linear gradient set in defs.

<linearGradient id="grad_3" x1="0" x2="0" y1="0" y2="1">
    <stop id="fade-stop-1" offset="0.0" stop-opacity="1.0" />
    <stop id="fade-stop-2" offset="0.5" stop-opacity="1.0" />
    <stop id="fade-stop-3" offset="0.5" stop-opacity="1.0" />
    <stop id="fade-stop-4" offset="1.0" stop-opacity="1.0" />
</linearGradient>

And some CSS:

#fade-stop-1 {stop-color: white;}
#fade-stop-2 {stop-color: white;}
#fade-stop-3 {stop-color: currentColor;}
#fade-stop-4 {stop-color: currentColor;}

However, the result is a rectangle that is half white and half black instead of half white and half red. What is my mistake?

[edit]

I think my mistake was that the SVG tag should use color="#ff0000" instead of fill="#ff0000". I'm not sure yet, as I haven't tested it.