SVG HTML

A Multi-Level Radial Color Gradient

This SVG example illustrates how to color a rectangle with a multi-level radial color gradient.

MultilevelRadialGradient.svg

<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>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.