Creating SVG-Gradients

loading views

To use gradients in SVG, we first have to defines them in the <defs> section inside the SVG.

<svg width="200" height="200" viewPort="0 0 200 200">
    <defs>
        <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="pink" stop-opacity="0" />
            <stop offset="100%" stop-color="pink" />
        </linearGradient>
    </defs>

    ...
</svg>

After it is defined it can be used as follows

<rect x="0" y="0" width="200" height="200" fill="url(#gradient)" />

Code

<svg width="200" height="200" viewPort="0 0 200 200">
    <defs>
        <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="pink" stop-opacity="0" />
            <stop offset="100%" stop-color="pink" />
        </linearGradient>
    </defs>

    <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" />
</svg>