ImageToSVG

How to Create SVG radialGradient — Circular & Spotlight Effects

SVG radialGradient creates circular color transitions — from center glow to edge fade — for buttons, orbs, and spotlight lighting effects.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

SVG radialGradient Syntax

Define `<radialGradient>` in `<defs>` with `cx`, `cy` (center), `r` (radius), and `<stop>` elements. Apply with `fill='url(#gradId)'`. The gradient radiates from the center point outward.

  • <radialGradient id='glow' cx='50%' cy='50%' r='50%'>
  • <stop offset='0%' stop-color='white'/>
  • <stop offset='100%' stop-color='navy'/>

Focal Point for Off-Center Spotlight Effects

`fx` and `fy` set the focal point of the gradient — where the inner color starts. Setting `fx='30%' fy='30%'` with `cx='50%' cy='50%'` creates an off-center highlight, simulating a spotlight or 3D sphere.

  • fx, fy: focal point (default = cx, cy)
  • Move fx/fy off-center for spotlight or 3D sphere effect
  • Combine with opacity stops for glowing button styles

Frequently Asked Questions

What is the difference between SVG radialGradient and linearGradient?

linearGradient transitions colors along a straight axis (left-to-right, top-to-bottom). radialGradient transitions colors radiating outward from a center point.

Can I animate an SVG radial gradient?

Yes — use CSS custom properties or SMIL <animate> to change stop-color or stop-opacity values in a radialGradient for pulsing glow or color-shift effects.

Related guides

Free converterConvert any image to SVG instantlySVG for CricutCricut-compatible SVG in one stepSVG vs PNGWhich format should you use?Conversion guideStep-by-step image to SVG walkthrough

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG