Article Categories

Selected Reading

How to draw a circular gradient in HTML5?

HTML Web Development Front End Technology

HTML5 Canvas provides the createRadialGradient() method to create circular or radial gradients. This method returns a CanvasGradient object that represents a radial gradient painting along a cone defined by two circles. The gradient transitions smoothly from the inner circle to the outer circle, creating a circular gradient effect.

Syntax

Following is the syntax for the createRadialGradient() method −

createRadialGradient(x0, y0, r0, x1, y1, r1)

Parameters

The createRadialGradient() method accepts six parameters that define two circles −

Parameter	Description
x0	x-coordinate of the starting circle's center
y0	y-coordinate of the starting circle's center
r0	Radius of the starting circle
x1	x-coordinate of the ending circle's center
y1	y-coordinate of the ending circle's center
r1	Radius of the ending circle

Basic Radial Gradient Example

Following example demonstrates how to create a simple radial gradient −

<!DOCTYPE html>
<html>
<head>
   <title>HTML5 Radial Gradient</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Basic Radial Gradient</h2>
   <canvas id="basicCanvas" width="300" height="200" style="border: 1px solid #ccc;"></canvas>
   <script>
      var canvas = document.getElementById("basicCanvas");
      var ctx = canvas.getContext("2d");
      
      // Create radial gradient
      var gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
      gradient.addColorStop(0, "#FFFFFF");
      gradient.addColorStop(1, "#66CC00");
      
      // Apply gradient and fill rectangle
      ctx.fillStyle = gradient;
      ctx.fillRect(20, 10, 200, 150);
   </script>
</body>
</html>

The output shows a rectangular area filled with a radial gradient from white center to green edges −

A rectangle with radial gradient: white center transitioning to green at the edges

Circular Radial Gradient

To create a perfect circular gradient, use the same center point for both circles with different radii −

<!DOCTYPE html>
<html>
<head>
   <title>Circular Radial Gradient</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Perfect Circular Gradient</h2>
   <canvas id="circularCanvas" width="300" height="200" style="border: 1px solid #ccc;"></canvas>
   <script>
      var canvas = document.getElementById("circularCanvas");
      var ctx = canvas.getContext("2d");
      
      // Create circular gradient (same center point)
      var gradient = ctx.createRadialGradient(150, 100, 0, 150, 100, 80);
      gradient.addColorStop(0, "#FF6B6B");
      gradient.addColorStop(0.5, "#4ECDC4");
      gradient.addColorStop(1, "#45B7D1");
      
      // Fill entire canvas
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 300, 200);
   </script>
</body>
</html>

This creates a perfect circular gradient with multiple color stops radiating from the center −

A perfect circular gradient: red center ? teal middle ? blue edges

Multi-Color Gradient with Color Stops

You can add multiple color stops to create complex gradient effects −

<!DOCTYPE html>
<html>
<head>
   <title>Multi-Color Radial Gradient</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Rainbow Radial Gradient</h2>
   <canvas id="rainbowCanvas" width="400" height="250" style="border: 1px solid #ccc;"></canvas>
   <script>
      var canvas = document.getElementById("rainbowCanvas");
      var ctx = canvas.getContext("2d");
      
      // Create rainbow gradient
      var gradient = ctx.createRadialGradient(200, 125, 10, 200, 125, 120);
      gradient.addColorStop(0, "#FFFFFF");
      gradient.addColorStop(0.2, "#FF0000");
      gradient.addColorStop(0.4, "#FFFF00");
      gradient.addColorStop(0.6, "#00FF00");
      gradient.addColorStop(0.8, "#0000FF");
      gradient.addColorStop(1, "#800080");
      
      // Draw filled circle
      ctx.fillStyle = gradient;
      ctx.beginPath();
      ctx.arc(200, 125, 120, 0, 2 * Math.PI);
      ctx.fill();
   </script>
</body>
</html>

This creates a rainbow-colored radial gradient within a circular shape −

A circular rainbow gradient: white center ? red ? yellow ? green ? blue ? purple edges

How It Works

The radial gradient works by defining two circles and transitioning colors between them. Here's the process −

Define circles − The first three parameters (x0, y0, r0) define the starting circle, and the last three (x1, y1, r1) define the ending circle.
Add color stops − Use addColorStop(position, color) where position is between 0 (start) and 1 (end).
Apply gradient − Set the gradient as fillStyle or strokeStyle before drawing.

Key Points

The inner circle (r0) can have radius 0 for a point-source gradient.
Different center points create directional gradients.
Multiple color stops create smooth multi-color transitions.
The gradient can be applied to any shape or filled area.
Color stop positions must be between 0.0 and 1.0.

Conclusion

HTML5's createRadialGradient() method provides powerful circular gradient capabilities for Canvas elements. By defining two circles and adding color stops, you can create everything from simple radial effects to complex rainbow gradients. The method is essential for creating visually appealing graphics and backgrounds in web applications.

Lakshmi Srinivas

Updated on: 2026-03-16T21:38:53+05:30

337 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next