Text gradients are super easy to achieve with HTML5 Canvas.

Process

Here’s the process:

Step 1

Create your CanvasGradient object with createLinearGradient.

JavaScript
// createLinearGradient(start_x, start_y, end_x, end_y);

var grad = ctx.createLinearGradient(50, 20, 220, 70);

Step 2

Add your Gradient Color Stops.

JavaScript
grad.addColorStop(0, 'red');

grad.addColorStop(0.3, 'yellow');

grad.addColorStop(0.5, 'green');

grad.addColorStop(0.8, 'deepPink');

grad.addColorStop(1, 'blue');

Step 3

Set your fillStyle or strokeStyle.

JavaScript
ctx.fillStyle = grad;

// or ctx.strokeStyle = grad;

Step 4

Finally, draw your text with fillText or strokeText.

JavaScript
// Setting the BaseLine

ctx.textBaseline = 'top';

// Setting Font details

ctx.font = 'bold 40px Verdana';

// Drawing the text

ctx.fillText('CSSDeck', 50, 20);

// or ctx.strokeText('CSSDeck', 50, 20);

Step 5

Here’s your Demo.

Quick Tip

Try altering the arguments that you passed to ctx.createLinearGradient(). Tweaking them will allow you to change the gradient directions!