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.
Drop your image here
Supports PNG, JPG, WEBP up to 5MB
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
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in seconds.
Try It Free — Convert Image to SVG