This SVG example illustrates how to color a rectangle with a multi-level radial color gradient.
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="idRadGrad" cx="50%" cy="50%" r="50%" fr="0%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="20%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
<stop offset="40%" style="stop-color:rgb(255,255,255); stop-opacity:1" />
<stop offset="60%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
<stop offset="80%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
</radialGradient>
</defs>
<rect x="25" y="25" width="350" height="250" fill="url(#idRadGrad)" />
</svg>
© 20072025 XoaX.net LLC. All rights reserved.