SVG Radial Gradient

Radial Gradient creates color transition radiating outward from a center point.

Basic Syntax

<svg width="200" height="200">
  <defs>
    <radialGradient id="myRadial">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#1e3a8a"/>
    </radialGradient>
  </defs>

  <circle fill="url(#myRadial)" cx="100" cy="100" r="80"/>
</svg>

Main Properties

radialGradient Properties

Property	Description
id	Unique gradient identifier
cx, cy	Gradient center coordinates (default 50%)
r	Gradient radius (default 50%)
fx, fy	Focal point coordinates (default same as center)
fr	Focal point radius
gradientUnits	Coordinate system
spreadMethod	Spread method

stop Properties

Property	Description
offset	Color position (0%-100%)
stop-color	Color value
stop-opacity	Opacity

Basic Radial Gradient

<svg width="400" height="150">
  <defs>
    <radialGradient id="radial1">
      <stop offset="0%" stop-color="#fbbf24"/>
      <stop offset="100%" stop-color="#f59e0b"/>
    </radialGradient>

    <radialGradient id="radial2">
      <stop offset="0%" stop-color="#22c55e"/>
      <stop offset="50%" stop-color="#16a34a"/>
      <stop offset="100%" stop-color="#14532d"/>
    </radialGradient>
  </defs>

  <circle fill="url(#radial1)" cx="80" cy="75" r="60"/>
  <circle fill="url(#radial2)" cx="230" cy="75" r="60"/>
</svg>

Adjusting Gradient Position

Changing Center Position

<svg width="500" height="150">
  <defs>
    <!-- Default center -->
    <radialGradient id="center">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </radialGradient>

    <!-- Top-left corner -->
    <radialGradient id="topLeft" cx="20%" cy="20%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </radialGradient>

    <!-- Bottom-right corner -->
    <radialGradient id="bottomRight" cx="80%" cy="80%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#ef4444"/>
    </radialGradient>
  </defs>

  <circle fill="url(#center)" cx="80" cy="75" r="60"/>
  <text x="80" y="150" text-anchor="middle" font-size="11">Center</text>

  <circle fill="url(#topLeft)" cx="220" cy="75" r="60"/>
  <text x="220" y="150" text-anchor="middle" font-size="11">Top Left</text>

  <circle fill="url(#bottomRight)" cx="360" cy="75" r="60"/>
  <text x="360" y="150" text-anchor="middle" font-size="11">Bottom Right</text>
</svg>

Changing Gradient Radius

<svg width="400" height="150">
  <defs>
    <!-- Small radius -->
    <radialGradient id="smallR" r="30%">
      <stop offset="0%" stop-color="#fbbf24"/>
      <stop offset="100%" stop-color="#1f2937"/>
    </radialGradient>

    <!-- Large radius -->
    <radialGradient id="largeR" r="100%">
      <stop offset="0%" stop-color="#fbbf24"/>
      <stop offset="100%" stop-color="#1f2937"/>
    </radialGradient>
  </defs>

  <circle fill="url(#smallR)" cx="100" cy="75" r="60"/>
  <text x="100" y="150" text-anchor="middle" font-size="11">r="30%"</text>

  <circle fill="url(#largeR)" cx="280" cy="75" r="60"/>
  <text x="280" y="150" text-anchor="middle" font-size="11">r="100%"</text>
</svg>

Focal Point Offset

Use fx and fy to create off-center effects:

<svg width="400" height="150">
  <defs>
    <!-- No offset -->
    <radialGradient id="noOffset">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </radialGradient>

    <!-- Focal point offset -->
    <radialGradient id="withOffset" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </radialGradient>
  </defs>

  <circle fill="url(#noOffset)" cx="100" cy="75" r="60"/>
  <text x="100" y="150" text-anchor="middle" font-size="11">No Offset</text>

  <circle fill="url(#withOffset)" cx="280" cy="75" r="60"/>
  <text x="280" y="150" text-anchor="middle" font-size="11">Focal Offset</text>
</svg>

spreadMethod Spread Mode

<svg width="500" height="150">
  <defs>
    <!-- pad -->
    <radialGradient id="padRadial" r="30%" spreadMethod="pad">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </radialGradient>

    <!-- repeat -->
    <radialGradient id="repeatRadial" r="30%" spreadMethod="repeat">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </radialGradient>

    <!-- reflect -->
    <radialGradient id="reflectRadial" r="30%" spreadMethod="reflect">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </radialGradient>
  </defs>

  <circle fill="url(#padRadial)" cx="80" cy="75" r="60"/>
  <text x="80" y="150" text-anchor="middle" font-size="11">pad</text>

  <circle fill="url(#repeatRadial)" cx="220" cy="75" r="60"/>
  <text x="220" y="150" text-anchor="middle" font-size="11">repeat</text>

  <circle fill="url(#reflectRadial)" cx="360" cy="75" r="60"/>
  <text x="360" y="150" text-anchor="middle" font-size="11">reflect</text>
</svg>

Multi-color Radial Gradient

<svg width="300" height="150">
  <defs>
    <radialGradient id="multiColor">
      <stop offset="0%" stop-color="#ef4444"/>
      <stop offset="25%" stop-color="#f59e0b"/>
      <stop offset="50%" stop-color="#22c55e"/>
      <stop offset="75%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </radialGradient>
  </defs>

  <circle fill="url(#multiColor)" cx="150" cy="75" r="70"/>
</svg>

Transparent Radial Gradient

<svg width="300" height="150">
  <defs>
    <radialGradient id="fadeRadial">
      <stop offset="0%" stop-color="#3b82f6" stop-opacity="1"/>
      <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <!-- Background -->
  <rect x="0" y="0" width="300" height="150" fill="#f3f4f6"/>

  <!-- Gradient circle -->
  <circle fill="url(#fadeRadial)" cx="150" cy="75" r="70"/>
</svg>

For Rectangle

<svg width="300" height="150">
  <defs>
    <radialGradient id="rectRadial" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#fbbf24"/>
      <stop offset="100%" stop-color="#b45309"/>
    </radialGradient>
  </defs>

  <rect fill="url(#rectRadial)" x="20" y="20" width="260" height="110" rx="10"/>
</svg>

Practical Application Examples

3D Sphere Effect

<svg width="200" height="200">
  <defs>
    <radialGradient id="sphere" cx="35%" cy="35%" r="60%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="20%" stop-color="#60a5fa"/>
      <stop offset="60%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#1e3a8a"/>
    </radialGradient>
  </defs>

  <circle fill="url(#sphere)" cx="100" cy="100" r="80"/>
</svg>

Spotlight Effect

<svg width="300" height="200">
  <defs>
    <radialGradient id="spotlight" cx="50%" cy="40%" r="50%">
      <stop offset="0%" stop-color="#fbbf24" stop-opacity="0.8"/>
      <stop offset="50%" stop-color="#fbbf24" stop-opacity="0.3"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <!-- Dark background -->
  <rect x="0" y="0" width="300" height="200" fill="#1f2937"/>

  <!-- Spotlight -->
  <ellipse fill="url(#spotlight)" cx="150" cy="100" rx="120" ry="80"/>
</svg>

Button Highlight

<svg width="200" height="60">
  <defs>
    <radialGradient id="btnHighlight" cx="50%" cy="0%" r="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.3"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <!-- Button base color -->
  <rect x="10" y="10" width="180" height="44" rx="8" fill="#3b82f6"/>

  <!-- Highlight layer -->
  <rect x="10" y="10" width="180" height="22" rx="8" fill="url(#btnHighlight)"/>

  <text x="100" y="38" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Button
  </text>
</svg>

Icon Background

<svg width="100" height="100">
  <defs>
    <radialGradient id="iconBg" cx="30%" cy="30%">
      <stop offset="0%" stop-color="#60a5fa"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </radialGradient>
  </defs>

  <circle fill="url(#iconBg)" cx="50" cy="50" r="45"/>
  <text x="50" y="60" text-anchor="middle" fill="white" font-size="32">★</text>
</svg>

Radar Chart Background

<svg width="200" height="200">
  <defs>
    <radialGradient id="radarBg">
      <stop offset="0%" stop-color="#22c55e" stop-opacity="0.1"/>
      <stop offset="50%" stop-color="#22c55e" stop-opacity="0.2"/>
      <stop offset="100%" stop-color="#22c55e" stop-opacity="0.3"/>
    </radialGradient>
  </defs>

  <!-- Background -->
  <circle fill="url(#radarBg)" cx="100" cy="100" r="90"/>

  <!-- Concentric circles -->
  <circle cx="100" cy="100" r="90" fill="none" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
  <circle cx="100" cy="100" r="60" fill="none" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
  <circle cx="100" cy="100" r="30" fill="none" stroke="#22c55e" stroke-width="1" opacity="0.5"/>

  <!-- Cross lines -->
  <line x1="10" y1="100" x2="190" y2="100" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
  <line x1="100" y1="10" x2="100" y2="190" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
</svg>

Bubble Effect

<svg width="200" height="150">
  <defs>
    <radialGradient id="bubble" cx="30%" cy="30%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
      <stop offset="30%" stop-color="#60a5fa" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#3b82f6" stop-opacity="0.2"/>
    </radialGradient>
  </defs>

  <rect x="0" y="0" width="200" height="150" fill="#e0f2fe"/>

  <circle fill="url(#bubble)" cx="60" cy="50" r="35" stroke="#3b82f6" stroke-width="1" opacity="0.5"/>
  <circle fill="url(#bubble)" cx="130" cy="90" r="45" stroke="#3b82f6" stroke-width="1" opacity="0.5"/>
  <circle fill="url(#bubble)" cx="170" cy="40" r="20" stroke="#3b82f6" stroke-width="1" opacity="0.5"/>
</svg>

Next Steps

Now that you've mastered gradient techniques, check out comprehensive applications in SVG Examples!