Chapter 44: Canvas Radial Gradients
1. What is a Radial Gradient in Canvas? (Clear definition first)
A radial gradient in Canvas means a smooth color transition that spreads outward from a central point — like ripples in water, light from a bulb, a glowing orb, a shiny button highlight, or a sunset sky in a circle.
It is the circular / round version of the linear gradient we studied earlier.
Instead of changing color along a straight line, the color changes from the center outward in all directions — usually brightest / lightest in the middle and darker / different color toward the edges.
Real-life examples you see every day:
- Shiny metallic buttons (white highlight in center → dark metal edge)
- Glowing neon orbs / loaders
- Glass / plastic / bubble effects
- Spotlight / vignette effect
- 3D-looking spheres or orbs
- Radial progress indicators
2. How to Create & Use a Radial Gradient (Core Steps)
You need three main steps (almost same as linear, but different method):
- Create the gradient object with createRadialGradient(cx0, cy0, r0, cx1, cy1, r1)
- Add color stops with addColorStop(offset, color)
- Assign it to fillStyle or strokeStyle and draw your shape
Basic syntax:
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const gradient = ctx.createRadialGradient( cx0, cy0, r0, // inner circle: center x, center y, radius cx1, cy1, r1 // outer circle: center x, center y, radius ); // Usually inner radius = 0 (sharp center point) gradient.addColorStop(0, 'white'); // center gradient.addColorStop(1, 'blue'); // edge ctx.fillStyle = gradient; ctx.fillRect(...); // or arc, path, etc. |
Most common pattern (simple glowing orb):
JavaScript
|
0 1 2 3 4 5 6 7 8 9 |
const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius); grad.addColorStop(0, 'white'); // brightest center grad.addColorStop(0.4, '#00bfff'); // cyan middle grad.addColorStop(1, '#00008b'); // dark navy edge |
3. Your First Radial Gradient – Shiny Orb / Ball (Copy-Paste & Run)
Create canvas-radial-gradient.html:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Radial Gradient – Shiny Orb</title> <style> canvas { border: 4px solid #2c3e50; background: #1a1a2e; display: block; margin: 30px auto; } h1 { text-align: center; color: #ecf0f1; background: #34495e; padding: 15px; margin: 0; } </style> </head> <body style="background:#1a1a2e; color:#ecf0f1;"> <h1>Canvas Radial Gradient – Glowing Orb Effect</h1> <canvas id="orbCanvas" width="700" height="500"></canvas> <script> const canvas = document.getElementById('orbCanvas'); const ctx = canvas.getContext('2d'); // === 1. Simple glowing blue orb === const grad1 = ctx.createRadialGradient(350, 250, 0, 350, 250, 180); // inner radius 0 → sharp bright center // outer radius 180 → fade to edge grad1.addColorStop(0, 'white'); // brightest highlight grad1.addColorStop(0.4, '#00bfff'); // cyan grad1.addColorStop(1, '#00008b'); // dark navy ctx.beginPath(); ctx.arc(350, 250, 180, 0, Math.PI * 2); ctx.fillStyle = grad1; ctx.fill(); // Border glow (optional thin stroke with same gradient) ctx.strokeStyle = grad1; ctx.lineWidth = 10; ctx.stroke(); // Label ctx.font = 'bold 40px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.fillText('Glowing Orb', 350, 450); // === 2. Off-center highlight (light from side) === const grad2 = ctx.createRadialGradient(280, 180, 0, 350, 250, 180); // inner center shifted top-left → light source from top-left grad2.addColorStop(0, 'white'); grad2.addColorStop(0.5, '#3498db'); grad2.addColorStop(1, '#2c3e50'); ctx.beginPath(); ctx.arc(550, 250, 180, 0, Math.PI * 2); ctx.fillStyle = grad2; ctx.fill(); ctx.fillText('Side-lit Orb', 550, 450); </script> </body> </html> |
What you see:
- Left orb: perfect center glow (white → cyan → dark blue)
- Right orb: light coming from top-left (more realistic 3D look)
4. All Important Parts of Radial Gradients (With Copy-Paste Snippets)
A. Perfect Center Glow (most common)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 |
const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius); grad.addColorStop(0, 'white'); grad.addColorStop(0.7, '#00d4ff'); grad.addColorStop(1, '#001f3f'); |
B. Ring / Donut Effect (inner radius > 0)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const ringGrad = ctx.createRadialGradient(300, 200, 60, 300, 200, 140); ringGrad.addColorStop(0, '#ff6b6b'); ringGrad.addColorStop(0.5, '#feca57'); ringGrad.addColorStop(1, '#ff6b6b'); ctx.beginPath(); ctx.arc(300, 200, 140, 0, Math.PI * 2); ctx.fillStyle = ringGrad; ctx.fill(); |
→ Hollow center, colorful ring
C. Multiple Stops + Transparency
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
const fadeGrad = ctx.createRadialGradient(350, 250, 0, 350, 250, 300); fadeGrad.addColorStop(0, 'rgba(255,255,255,0.9)'); fadeGrad.addColorStop(0.6, 'rgba(255,255,255,0.4)'); fadeGrad.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = fadeGrad; ctx.fillRect(0, 0, canvas.width, canvas.height); |
→ Soft white radial vignette overlay
D. Gradient on Stroke (Glowing Border)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const strokeGrad = ctx.createRadialGradient(300, 200, 0, 300, 200, 100); strokeGrad.addColorStop(0, '#00ffff'); strokeGrad.addColorStop(1, '#ff00ff'); ctx.beginPath(); ctx.arc(300, 200, 100, 0, Math.PI * 2); ctx.strokeStyle = strokeGrad; ctx.lineWidth = 30; ctx.stroke(); |
→ Neon glowing ring
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Inner radius = 0 → sharp bright center (most realistic orbs)
- Inner radius > 0 → hollow / ring / donut effect
- Use fx/fy parameters (focal point) to shift highlight (advanced)
JavaScript
|
0 1 2 3 4 5 6 |
ctx.createRadialGradient(cx, cy, 0, fx, fy, radius); // focal point fx,fy |
- Common mistake #1: Forget to assign gradient to fillStyle / strokeStyle → solid color instead
- Common mistake #2: Same inner & outer center + radius → no gradient
- Pro tip: Combine radial + linear gradient on same shape → metallic shine (linear base + radial highlight)
- Pro tip 2: Add shadowBlur + shadowColor → extra glow
JavaScript
|
0 1 2 3 4 5 6 7 |
ctx.shadowBlur = 30; ctx.shadowColor = '#00bfff'; |
Understood Canvas Radial Gradients fully now? This is one of the most beautiful and most-used effects in Canvas — almost every shiny button, orb loader, glassmorphism card, glowing icon, progress ring, and modern UI element uses radial gradients.
Tell me what you want next — we can build on this:
- Full animated pulsing orb (radial gradient + scale)?
- Metallic button with linear + radial + shadow?
- Glassmorphism card with radial + blur?
- Radial progress circle / gauge?
- Or 15-question radial gradient quiz?
Just say — we keep going step by step together! 🚀
