SOURCE

<svg>
    <defs>
        <linearGradient id="gradient1">
            <stop class="stop1" offset="0"></stop>
            <stop class="stop2" offset="0.5"></stop>
            <stop class="stop3" offset="1"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x1="0" x2="1" y1="0" y2="1">
            <stop stop-color="yellow" offset="0"></stop>
            <stop stop-color="pink" offset="0.5" stop-opacity="0.5"></stop>
            <stop stop-color="black" offset="1"></stop>
        </linearGradient>
        <style>
            #rect1{
                fill: url(#gradient1);
                stroke: url(#gradient2);
                stroke-width: 5;
            }
            .stop1{
                stop-color: red;
            }
            .stop2{
                stop-color: green;
                stop-opacity: 0.5;
            }
            .stop3{
               stop-color: blue;
            }
        </style>
    </defs>
    <rect width="100" height="50" id="rect1" />
    <rect x="120" y="0" width="100" height="50" id="rect2" fill="url(#gradient2)" />
</svg>